Sunday, November 29, 2015

Dynamically reload Google AdSense ads without refreshing the entire page



Hi there, nice to have you here.
My name is shain and I'd like to share my thoughts on coding with PHP, MySQL and JavaScript.

HOMEABOUT MECONTACT

RECENT POSTS

Howto install Apache Solr with Tomcat 6 on CentOS 6 LinuxGetting back to the blog…Dynamically reload Google AdSense ads without refreshing the entire pageSyntax highlighted code snippets with google-code-prettifyJust another developer blog…

RECENT COMMENTS

Atis on Dynamically reload Google AdSense ads without refreshing the entire pageMehmood Ahmad onDynamically reload Google AdSense ads without refreshing the entire pageangularJS Newbie onDynamically reload Google AdSense ads without refreshing the entire pageMartin Aust on Dynamically reload Google AdSense ads without refreshing the entire pageangularJS Newbie onDynamically reload Google AdSense ads without refreshing the entire page

CATEGORIES

AdSenseApache SolrCentosGeneralJavaScript

Dynamically reload Google AdSense ads without refreshing the entire page

By Martin Aust in AdSense, General,JavaScript 2013/11/26 9 Comments

If you ask Google how to dynamically reload your AdSense tags you might get alot of blog entries where the authors show you how to refresh your ads by using JavaScript and HTML iframeelements for example. I took place in Google AdSense publisher event in Munich in 2011 and if nothing has changed since then I can tell you that such methods are not allowed by Google so far. So why do you want to make use of refreshing your ads without reloading the entire page? Well, probably your app simply isn’t designed to reload. Imagine that users control the whole site with the help of Ajax. It looks pretty cool how everything acts or changes just without the delay of a heavy site reload but, of course, you ads wont generate any significant impressions because an impression is only counted once the ad reloads.

I’ll show you a short and rather legal method to refresh your ads just by doing some click action once in a while. This example is based on the use of Google’s DFP (doubleclick for publishers) adserver. First you need to implement the compulsory code in your site’s head.

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<html>

  <head>

    <script type="text/javascript">

      var googletag = googletag || {};

      googletag.cmd = googletag.cmd || [];

      (function() {

        var gads = document.createElement("script");

        gads.async = true;

        gads.type = "text/javascript";

       var useSSL = "https:" == document.location.protocol;

       gads.src = (useSSL ? "https:" : "http:") +

       "//www.googletagservices.com/tag/js/gpt.js";

       var node = document.getElementsByTagName("script")[0];

       node.parentNode.insertBefore(gads, node);

     })();

  </script>

</head>

After this you have to place the proper ads in your site’s body. Please notice that your ad slot is defined as “slot1”. This is important for us to get a reference on this element and make use of the Google Publisher API.

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<html>

<head>

  ...

</head>

<body>

  <!-- YOUR AD TAG HERE -->

    <div id="div-gpt-ad-1327312723268-0" style="width:728px; height:90px;">

      <script type="text/javascript">

        googletag.cmd.push(function() {

        var slot1 = googletag.defineSlot("/12345678/Refresh_Example", [728, 90],

        "div-gpt-ad-1327312723268-0").addService(googletag.pubads());

        googletag.enableServices();

        googletag.display("div-gpt-ad-1327312723268-0");

      </script>

    </div>

  </body>

</html>

Finally, you have to decide which event should make your ad refresh. This can be a simple click on your page or even an automated refresh every x seconds. Here are two examples:

Automatically refresh your ad tags every 20 seconds

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

<html>

<head>

  ...

</head>

<body>

  ...

  <!-- PUT THESE LINES ON THE FOOT OF YOUR PAGE -->

    <script type="text/javascript">

       setInterval(function(){googletag.pubads().refresh([slot1]);}, 20000);});

    </script>

</body>

</html>

Here we call the setInterval function which calls itself every 20 seconds and uses the .refresh command for “slot1” to dynamically refresh our ad.

Manually refresh your ad tags once clicked whitin 20 seconds

Please make sure that the jQuery plugin is is loaded while I use the .on()function to bind a click event on the whole document.

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<html>

<head>

  ...

</head>

<body>

  ...

  <!-- PUT THESE LINES ON THE FOOT OF YOUR PAGE -->

    <script type="text/javascript">

      $(document).ready(function(){

        $(document).unbind('click.google.adrefresh').on('click.google.adrefresh', function(){

          var now = new Date();

          var no_ad_block = $.isFunction(googletag.pubads);



          if(((timer.getTime() / 1000 + 20) <= (now.getTime() / 1000)) && no_ad_block) {



            googletag.pubads().refresh([slot1]);

            timer = now;

          }

        });

      });

    </script>

</body>

</html>

So if a user clicks anywhere whitin a period of 20 seconds, your ad will be refreshed. After the 20 seconds has passed your refresh is ready for a new click. You might adjust the time period by increasing the 20 of thetimer.getTime() / 1000 + 20 part.

I hope you’ve found a good solution for dynamically reloading your ad tags by using this simple and official method provided by Google itself. I wish you alot of impressions!

You like this article? Please share it!
 AdSense link units, only ad units.

 L

FOLLOW ME

Plz comment your self