How To Setup Google Ad Manager on Your Blog or Website

By . in Internet. Updated on .

If you are generating revenue off your website or blog, chances are you serve banner ads and they are either updated manually by adding the images and URLs into the source codes or with the help of external ad-serving scripts like OpenX or OIO Publishers.

Google has a similar web service, call the Google Ad Manager. In a nutshell, it is a simple (and free) web service that helps you manage banner ads. It also comes with a pretty complete inventory report module. Ad Manager integrates with AdSense, therefore webmasters have the ability to serve AdSense ads if there’s no banner for any particular slot. Here’s a quick look into advantages of Google Ad Manager:

  • Ad Targeting ability. You control who get to see the ads. Let it be geographical, browser or language specific.
  • Efficient ad serving. No script installation is required. Everything (including the creatives) are hosted with Google. Not only it saves you space and bandwidths, you can also be rest-assured that banners will be delivered quickly.
  • Multi-user supported. You can assign multiple salespersons to handle the sales part, and have everything documented/recorded nicely inside Google Ad Manager.
  • Simple User Interface. And like any other Google web services, Ad Manager has simple and easy to understand interface.

If you are convinced that Google Ad Manager is potentially helpful in managing advertisements for your website or blog, we want to show you how to get it setup right from the scratch. Full guide after jump.

1. Create Ad Slots

Ad Slots are the reserved space on your site for ad placements. If you want to insert 4 125×125 banners on your sidebr, you are looking at creating 4 ad slots. Here hongkiat.com, we have eight 125×125 image banners. That means we’ll need to repeately create 8 different ad slots. Let’s go about doing it.

  1. Under Inventory -> Ad Slots, click on New Ad Slots.
  2. Compulsory fields: Give your slot an unique Ad slot name. Select the banner size drop drop down, or create one if you like. Choose if the banner should open a new window (_blank) or open on current window (_top) upon click.
  3. Optional fields: Checked the AdSense checkbox is you want to maximize revenue on the slot with AdSense, but we’ll recommend not to, for now. Fill in a meaningful description for the Ad Slot, or you can perhaps skip this if your Ad slot name is self-descriptive enough.
  4. Save it.

Repeat step 1, 2 and 3 to create all the ad slots you’ll need. For our case, we will be creating 8 ad slots with different name. Here’s how one of them look like.

And once you are done with creating all your ad slots, here’s how your Inventory page will look like. Next, we will be creating ad placements.

2. Create Ad Placements

Ad Placements are what hold/group your ad slots together. For hongkiat.com, since we have 8 ad slots of 125×125 banners on the sidebar, we’ll need one ad placement to hold them together. Ad placement also make sure each ad gets a fair shot of being on the top position if you set them on rotational. Here’s how you create ad placement.

  1. Under Inventory -> Placements, click on New Placement.
  2. Compulsory fields: Give your ad placement a meaningful name. For example, we name ours "HKC-125-RightTop-Zone" because it’s going to store all 125×125 banners, positioned at the top right corner of the blog.
  3. Optional fields: If you allow AdSense to bid for ad slots in this placement, check for Targeting, else uncheck. The Internal Description is personal use only, something to let you understand your ad placements better.
  4. Add all ad slots that belongs to this new ad placement you’ve created, in our case we added all.
  5. Save it.

Here’s a sample of how our Ad Placement settings look like.

Once saved your ad placement, you’ll be returned to Inventory -> Placements main page and it looks something like this.

Here’s a quick summary – You’ve created the necessary Ad Slots, and group them under a Ad Placement. The next thing we need to do is to add "real" banners into each of these ad slots.

3. Create Orders

Orders

Think of Orders as banner order requests. It stores information about who the advertisers are, the start and end date of the ad campaigns, and more. If an advertise place an order of banner ad on your website, you create a new Order. If you have 8 Ad Slots, expect to create up to 8 different Orders. Make sense? Let’s create some Orders.

  1. Under Orders, click on New Order.
  2. Compulsory fields: Give each other an Order name and External ID you can easily regconized. Let the system know when the banner will start and when it’ll end by choosing the Start date and End date. Choose unlimited if it’s likely to be permanent.
  3. Optional fields: You might also want to fill up the Advertiser, Agency, Contacts, User Assignments and Notes to help you understand the Order better.
  4. Save it.

We’ll now create a Line item for this order.

Line Items

Line Items associate with Orders. Every time an Order is entered, you’ll need to create a Line Item for it. Line item allows you to determine the nature of the ad, whether it’s serving as CPC, CPM or CPD.You also set the cost/price for the ad here.

Everytime you hit the Save button after creating an Order, you’ll be directed to create a Line item.

  1. Click New line items.
  2. Give it a Name.
  3. Determine the Delivery Priority. If your order is a direct ad, change to Exclusive from the drop down box so you can use CPD (Cost per Day).
  4. Again, you need to make sure you’ve correctly entered the Start date and End date.
  5. Under Placement section, associate Line Item with it’s respective placement.
  6. Targetting section allows you to control who should see the ad. In another words, under what condition the ad will appear on your website. This setting is optional, by default ad will be visible to all.
  7. Delivery Options section detemine the appearance of the ad. Set Delivery rate and Creative rotation to Even will ensure all your orders get equal impressions.
  8. Save it.

Here’s how your line item will look like.

A quick recap before we continue. We’ve created an Order, with advertiser information, campaign start date and end date. Then we created Line Item for the Order where it stores information like cost type (CPC, CPM, CPD), cost, targetting behavours, etc. The next thing we need to do is to add creative for the ad.

Creatives

Creatives are images of the ads. Every time a Line Item is added, you’ll need to add (and approve) at least one creative for it.

  1. After saving a Line item, click on need creatives to add an image for the ad.
  2. Fill up the Name, Ad slot size (banner size), Creative type, Manual Weight (if you need to control the priority of banner rotations)
  3. Save it.

Creative type determines how you serve the banner image. Google Ad Manager is capable of hosting your banners internally (regardlessly of jpg, flash, gif or png) or you can host them elsewhere and insert the image URL. Use rich media if you need manual HTML codes insertion.

Here’s a sample of how creative upload page should be filled.

Remember to Approve and activate the creative.

Repeat all steps in Orders, Line Items and Creatives for every individual banners. In our case, we will repeat this 8 times to fill up all our ad slots.

4. Display Banners

Here’s our final step before ads start showing on our website – generate the codes and paste them inside our source codes.

  1. Go to Inventory -> Ad Slots, click on Generate Sample HTML.
  2. Add all slots needed to Selected Items section
  3. Click Generate Sample HTML

Scroll to the bottom to find your generated codes. It should look something like this:

  <html>
  <head>
  <!-- PUT THIS TAG IN THE head SECTION -->
  <script type="text/javascript" src="http://partner.googleadservices.com/gampad/google_service.js
  </script>
  <script type="text/javascript">
  GS_googleAddAdSenseService("ca-pub-8918970543424762");
  GS_googleEnableAllServices();
  </script>
  <script type="text/javascript">
  GA_googleAddSlot("ca-pub-8918970543424762", "HKC-125A1");
  GA_googleAddSlot("ca-pub-8918970543424762", "HKC-125A2");
  GA_googleAddSlot("ca-pub-8918970543424762", "HKC-125A3");
  GA_googleAddSlot("ca-pub-8918970543424762", "HKC-125A4");
  GA_googleAddSlot("ca-pub-8918970543424762", "HKC-125A5");
  GA_googleAddSlot("ca-pub-8918970543424762", "HKC-125A6");
  GA_googleAddSlot("ca-pub-8918970543424762", "HKC-125A7");
  GA_googleAddSlot("ca-pub-8918970543424762", "HKC-125A8");
  </script>
  <script type="text/javascript">
  GA_googleFetchAds();
  </script>
  <!-- END OF TAG FOR head SECTION -->
  </head>
  <body>
  <p>Sample Text before slot HKC-125A1
  </p>
  <!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT HKC-125A1
  -->
  <script type="text/javascript">
  GA_googleFillSlot("HKC-125A1");
  </script>
  <!-- END OF TAG FOR SLOT HKC-125A1
  -->
  <p>Sample Text before slot HKC-125A2
  </p>
  <!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT HKC-125A2
  -->
  <script type="text/javascript">
  GA_googleFillSlot("HKC-125A2");
  </script>
  <!-- END OF TAG FOR SLOT HKC-125A2
  -->
  <p>Sample Text before slot HKC-125A3
  </p>
  <!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT HKC-125A3
  -->
  <script type="text/javascript">
  GA_googleFillSlot("HKC-125A3");
  </script>
  <!-- END OF TAG FOR SLOT HKC-125A3
  -->
  <p>Sample Text before slot HKC-125A4
  </p>
  <!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT HKC-125A4
  -->
  <script type="text/javascript">
  GA_googleFillSlot("HKC-125A4");
  </script>
  <!-- END OF TAG FOR SLOT HKC-125A4
  -->
  <p>Sample Text before slot HKC-125A5
  </p>
  <!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT HKC-125A5
  -->
  <script type="text/javascript">
  GA_googleFillSlot("HKC-125A5");
  </script>
  <!-- END OF TAG FOR SLOT HKC-125A5
  -->
  <p>Sample Text before slot HKC-125A6
  </p>
  <!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT HKC-125A6
  -->
  <script type="text/javascript">
  GA_googleFillSlot("HKC-125A6");
  </script>
  <!-- END OF TAG FOR SLOT HKC-125A6
  -->
  <p>Sample Text before slot HKC-125A7
  </p>
  <!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT HKC-125A7
  -->
  <script type="text/javascript">
  GA_googleFillSlot("HKC-125A7");
  </script>
  <!-- END OF TAG FOR SLOT HKC-125A7
  -->
  <p>Sample Text before slot HKC-125A8
  </p>
  <!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT HKC-125A8
  -->
  <script type="text/javascript">
  GA_googleFillSlot("HKC-125A8");
  </script>
  <!-- END OF TAG FOR SLOT HKC-125A8
  -->
  </body>
  </html>

Follow the instructions stated in comments to insert the codes into their respective <head> and <body> sections.

Note: To prevent errors and avoid messing up the live site, it’s good that you copy the generated codes, paste it on a blank HTML to test the output. If the ads do not show up, chances are your current time is not yet the start date set in Orders and Line Items.

It’s done! You are now managing your website banners with Google Ad Manager. Login again few days later to check on the performance.

For any other questions, drop a comment, I’ll try my best to help.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail