Vicigo logo

How to integrate Google Adsense with AngularJS in 5 min

2015-12-27 Vicigo

The following article will show you how to implement Google Adsense into your AngularJS web application.

Vicigo

We start with the Google Adsense code which is provided in your Publisher console:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- vicigo-responsive -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


1. Add the Google AdSense API to the Index page

The first step is to take the script tag provided by Google’s AdSense to your main index.html or app.html file.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

This script usually lands in the <head> tag of your index.html page or at the end of the <body> tag, however always before the main app.js script.


2. Create the Directive

The next step is to create the AngularJS directive. In our case, the directive is called “GoogleAdsense” and added to the main AngularJS module.

The directive will take the code located at the path /js/directives/GoogleAdsense.html - the path should be replaced by you. The actual template will be created in the next step.

The key here is the “controller” that is executed when a new ad needs to be requested/shown on the page. In order to get Angular to process this line of script I created an anonymous function which becomes my controller for the directive. This single line literally adds the ad banner on your page.

VicigoApp.directive('GoogleAdsense', function () {
        return {
            restrict: 'A',
            replace: true,       
            templateUrl: "/directives/GoogleAdsense.html",
            controller: function () {
                 console.log("VicigoApp: Google Adsense is being added!");
                (adsbygoogle = window.adsbygoogle || []).push({});
            }
        };
    });


Step 3 – Create the Directive Template - googleAdsense.html

This is the container for your Google Adsense banner. The directive will be then replaced with the code which is placed in the template. I just took the code snippet provided by Google Adsense and added the part enclosed between the <ins> tags to the template file. 

<!-- vicigo-responsive -->
<ins class=”adsbygoogle”
     style=”display:inline-block;”
     data-ad-client=”ca-pub-xxxxxxxxxxxxx″
     data-ad-slot=”xxxxxxxx″
data-ad-format="auto">
</ins>


Alternatively, you can also insert this code into the template attiribute of the directive.

VicigoApp.directive('GoogleAdsense', function () {
        return {
            restrict: 'A',
            replace: true,       

            template: '<ins class=”adsbygoogle”
                          style=”display:block;”
                          data-ad-client=”ca-pub-xxxxxxxxxxxxx″
                          data-ad-slot=”xxxxxxxx″
                          data-ad-format="auto"></ins>',
controller: function () {
                          (adsbygoogle = window.adsbygoogle || []).push({});
                        }
        };
    });

Note that you need to replace the data-ad-client and the data-ad-slot attributes with your own. 


Step 4 – Add the directive!

The last step is to add the directive to the location in your web page for which you’d like the ad to show up. At this point just find the place in your HTML you’d like the ad banner to show and place this code in this location.


<google-adsense></div>


Note!

You can't refresh ads on the same page due to Google Adsense policy, so following above the ads will disapear after you generated 3 slots. 


Don’t forget to follow us on Twitter @viciqloud for more web&mobile development tutorials!


Short SirBz link: http://sir.bz/VrFdX

Images from viciceo

Vicigo - explore the world of hashtags