The Journey Of Google Ads and A Well Laid Out Landing Page For PPC

I finally figured out the best way to remember things that I have done, so I do not have to make the same mistakes in the future. I was presented with a client needing a Google Ad set up. I typically do not do this so I decided the first place to start YouTube. I found this good video here, it is on real estate but it made sense for me even though my client did not relate to this. I wanted to document this because by the end I am super proud of my accomplishments and all on my own doing.

Google Ad’s Set Up

Basically I felt that the process of this could be set up into 3 parts.

  1. Campaign
  2. Keywords / Ad Group
  3. Ad Creation

The campagin has some parts that were so cool it blew my mind. The process basically started with NEW CAMPAIGN -> WEBSITE TRAFFIC -> SEARCH. This was explained to me basically there are other options and this is the common one we typically see in the search on Google. The next step was NETWORK = SEARCH there is also Display but for me this was more what I was looking for. The more settings which I also had start and stop dates and AD schedule which I set to a normal time in the day.

Locations is the next area and let me set my radius and cities where I wanted the AD to show up. I liked this as it lets me zone right into the city beyond just the state. From here the rest of the setup for the actual campaign is laid out nicely and just has logical settings. Finishing off this part I will say in the BIDDING area I put a small amount. It was stated to me that this allows the ads to work and figure out what works best. Also, the Bidding was set to conversions and not clicks as we want people to do more than just go to the page but more so follow through.

Keywords / Ad Group

This was a place to add your services, keywords (I did some extra research on SEMRush for this) and then you can see what potientially this will cost. Very helpful in seeing what the probability is for your ads to be clicked on and actually converted.

Ad Creation

Here I did 2 text ads and one dynamic. From my understanding the headings will roteate to see which ones work best, and the dynamic will go even further allowing for up to 5 headings or so. The descriptions can work the same way. Basically the more informaition you provide the ad the more magic can happen. I think slacking on this can have a negative impact on the overall conversion.

Landing Page

I researched this and realized short, sweet, and to the point is the way to go. I created a nice header image with an opacity that had the logo, headline, and clickable phone number.

I decided to make the logo link to the homepage but took away the typical navigation.

Why?

Because having that in the way when a user visits I felt took away from the ad. We will see though. The next part was having some larger text with a button linking to more information and a specific form for the ad. This is all being done on a WordPress site as well.

In conclusion here, I am documenting for me and if someone stumbles upon this and it helps awesome. The biggest takeaway is doing PPC and ads is not SEO but having a good background in Development, SEO, helps so much for the creation and success of digital marketing.

How To Make A Div With Opacity But Keep The Text Fully Visible

Something I always find myself doing is needing a hero image that has an opacity on it and then put some text inside of the div holding it all together. This is also something that is common when I need to have visible text but do not want the image behind the said div to be obstructed.

When is this used?

– Hero images or Call To Action areas of a site

– A “keep scrolling” area that sits over some graphics or exisitng areas of the design

– Buttons with a transparent type effect

See the Pen text with opacity by taterdev (@wisecodeworks) on CodePen.

What we are seeing here above is the classic we have an image and need some text to overlay it without disturbing the actual image. This can be simple text, a button, or a feature to the object behind it.

Where Is The AwesomeNess?

In this case we breakdown the RGB.

RGB(0,0,255,0.6)

The frist three places define the color, but the 0.6 is the opacity that I am applying to get the desired effect. So really if you look up the rgb color code and then play with the 4th spot you can adjust as needed.

Why Not Use Opacity?

I used to always consider using opacity to accomplish this but then it would affect everything inside the image and really the colors could not be maintained that well. Instead with the power of RGB you can indeed control that color and only on the background while leaving everything else alone. Problems I would have to accomplish this as well as an attempt to take the image in Photoshop and then put the desired opacity on the image/object in question and apply the effect.

CSS Superpowers

I think it is important to remeber we all learn things daily and this CSS thing is at times magic. Jokes aside this really helped me develop better websites by learning this, and for that reason I thought others could find is useful as well.

Basic CSS Template For Page Breaks

Below is just a template for some basic breaks for responsive web development. I find that tossing this into my style sheet is a huge help, and that is why I wanted to put it up.

I will be updating this from time to time just for any updates I run across. I have to say that though these start at 769px it is worth pointing out that having a large media query can also be beneficial when developing if you know your audience. After you get some data on the people coming to the site, or if you do keyword research and find that people in that particular area look at sites like the one your are building on say a tablet instead of desktop, or even if you have Mac users over Windows.

Those specifics can come in handy when wanting to produce the very best experience.


/*ALL MOBILE STYLES BELOW*/
/*desktop*/
@media only screen and (min-width: 769px) {
  body {
    background-color: lightblue;
  }
}

/*Tablet*/
@media only screen and (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}
/*Phone*/
@media only screen and (max-width: 400px) {
  body {
    background-color: lightblue;
  }
}
/*Other*/
@media only screen and (max-width: /*add here*/) {
  
}