Google Adsense and Google Publisher Tag AngularJS Integration

Date: March 25, 2016

Category : March 25, 2016

What is GPT ? Google Publisher Tags (GPT) is an advertising embedding library using which you can create dynamically ad requests. GPT can customize ad type, ad size, ad size, and even user custom ads.

Out of the three modes of GPT we are working Asynchronous type of ad rendering. This mode is particularly well suited for single page applications as we dont want to fetch everything in a single request but instead based on the custom criteria.

Here is a sample of the code that is a implementation of ad slots across 3 routes using a simple directive.

… which is shown in the screenshot below: ![SPA GPT Adsense]({{ site.url }}/assets/img/demos/adsense-example.png)

We have used a very old version of Angular with Angular Route and also have included bootstrap for some basic styling. Here we have generated one slot for each route and re-navigating to visited routes will return empty as ad slot is already rendered.





    
    Adsense Test
    



    
    

We also a three different partials for the each route. One of them about.html is something like this.

About Page

{{ message }}

With googletag.pubads().refresh(slot); you should be able to refresh and continuous update the ad based on interactivity.

Check out the working demo here.

If you have any questions, comments or suggestions, feel free to join the discussion below!