Testing and adjusting the size and placement of ad units is one of the most important techniques for boosting AdSense revenue. Use these nifty tricks to tame your AdSense ads during local development without inflating page views or impressions.

Advertisement

Localhost and AdSense

Local development refers to offline development of your website on your own computer (“localhost”). You might be running a CMS like WordPress locally using MAMP or Docker, or writing plain old HTML and testing it in a web browser.

Regardless of the development method, working on your website locally means that you can test new features, make changes and (most importantly) break things without affecting your live website. Once you’re happy with the changes, you can push those modifications up to the web server for the world to see.

Advertisement

Being able to test your AdSense units — whether that be size, placement or something else — before deploying to your live website is incredibly useful. Unfortunately, local development can present some annoying problems for publishers. Firstly, since you’re only serving ads to yourself, that constant barrage of browser refreshing can artificially inflate ad impressions and, potentially, earnings.

Google really doesn’t like this, and you open the door not only to inaccurate reporting, but to potential program violations too. Luckily, there are a handful of really easy methods you can employ to make local AdSense testing a breeze.

1. Use Google’s adtest parameter

The first trick for local development is to enable Google’s data-adtest parameter. This flag tells AdSense that you’re working on a test version of your website and ads won’t be served. Set data-adtest to on in your ad code, as in the below example:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-adtest="on"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Make sure to remove this parameter on your live website, otherwise you won’t see any ads at all.

2. Authorise your websites

Google allows you to verify the sites you’d like to run AdSense ads on and authorise only those sites to earn legitimate revenue. By telling Google which domains are authentic, you can ensure that you’re only earning revenue (and collecting real impressions) from your live websites, not any local copies.

Advertisement

Follow these steps to authorise your websites:

  1. From the main menu, click Sites.
  2. Then, Add Site.
  3. Add the URL (or URLs) of your website.

Boom! Google will only recognise ads served on these verified domains and you’re free to test your AdSense units locally. Note that AdSense might email you to alert you that you’re running AdSense units on an unauthorised domain, but this is nothing to worry about.

A picture of an authorized AdSense site We’ve authorised this domain in our AdSense settings page.

This safeguard also has the bonus benefit of ensuring nobody is able to take your ad code and serve it illegitimately. While this is unlikely, it does stop potential inflation caused by crawlers or archival websites who might be harvesting and hosting your HTML (say that 5 times fast).

3. Set an environment variable

If you’re website is running on WordPress, you can set an environment variable to determine whether you’re working on the production (live) or development (local) version of your website. You can then use this variable to conditionally enable the AdSense JavaScript code.

Article continues below

To set an environment variable, add this line to the bottom of the wp-config.php file on your live website:

define('WP_ENVIRONMENT', 'production');

Then, add this line to the bottom of the wp-config.php file on your local development site:

define('WP_ENVIRONMENT', 'development');

Once you’ve enabled this custom variable, you can conditionally load the AdSense JavaScript only if you’re on the production version of your website. This means that AdSense ads will be served on your live site, but not during local development.

<?php
  if (WP_ENVIRONMENT == 'production') {
    echo '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>';
  }
?>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

4. Hide ads if you’re logged in

Another WordPress solution is to hide the AdSense JavaScript if you’re a logged in user. While this method requires you to be logged in at all times (which, during local development, you likely would be), it also allows you to completely block serving ads to yourself on your live website too.

Advertisement

You can use WordPress’ is_user_logged_in function to perform a similar conditional check. To do this, we check whether a user is not logged in (aka, a regular visitor) and then serve only them the AdSense JavaScript:

<?php
  if (!is_user_logged_in()) {
    echo '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>';
  }
?>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

5. Use an ad blocking extension

This technique is pretty low-fi, but actually quite useful. You can enable an ad blocking extension on your browser and then re-enable ads on your live website. This solution means you don’t need to edit any template code: your browser will take care of all the dirty work.

Advertisement

We recommend AdBlock, but any ad blocking tool will do the trick. Once you’ve enabled AdBlock in your browser you won’t see ads anywhere on the web. To see ads on your live website (or any other site), you can whitelist the domains.

6. Bonus tip: use CSS to highlight ads

If you’re hiding the AdSense JavaScript locally you’ll probably notice that — quite rightly — your ad units are totally invisible. It’s actually really useful to be able highlight where ads will be to help test your sizes and placements. If you’re using responsive ads, this is a great way to visualise how they will appear in all contexts.

Article continues below

A neat trick is to add a CSS border around ads when you’re developing locally. You’ll be able to see the exact shape and position of the ad (so you can test how it might appear in your layout), but you won’t be unnecessarily generating ad impressions.

A picture of a responsive AdSense ad with borders for debugging during local development Adding a border during local development helps to visualise where ads will be displayed.

This technique works with either of the tips above (the environment variable or logged in check). We’ll use the environment variable technique as an example here. Place the following code somewhere between your website’s <head> and </head> tags:

<?php
  if (WP_ENVIRONMENT == 'development') {
    echo '<style>';
    echo 'ins { border: 1px solid red; }';
    echo '</style>';
  }
?>

You’ll now see a gloriously ugly (but effective!) red border around your ads during local development. Perfect for testing and debugging!

Is it worth hiding ads during local development?

Absolutely! There’s a little bit of setup required to verify your sites and adjust your template code, but hiding ads during local development has a number of advantages:

  1. Your AdSense reporting is accurate. No inflated page views or ad impressions.
  2. You’re program policy compliant and don’t need to worry about illegal ad impressions.
  3. You don’t need to worry about others stealing your ad code.
  4. You can do precise testing of ad sizes and placements before pushing the code up to your live website.
Advertisement

Are you using any other tricks to test your AdSense units during local development? Let us know in the comments below or hit us up on Twitter.

Join the conversation 💬

Util Sites 11 January 2020

data-adtest=”on” not working now.