Google ads in Angular js app

This tutorial will help the user to integrate google AdSense in angular js projects. This code will help to monetize the AngularJs application without any issue. Implement the code wherever you want to display in your AngularJS pages.

You might also like

Iterate javascript object keys using angularjs ngRepeat

October 27, 2020

0

Enable and Disable drop down box using angularjs ngDisabled

November 26, 2019

0

Please follow the steps below to integrate the AdSense code in AngularJS projects.

Step1: Include the below js file inside the head tag or before the </body>.

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

Above js is for including the google adsense.

Step2: Create directive for Google AdSense.

In the below code, in the variable called “html” you can find the google adsense code which will append the code in html page and below code will return the adsense js dynamically. In “rand” var it will generate the random value to google “data-ad-region” which will make sure page got refereshed.

app.directive('googleAd', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            return $timeout(function() {
                var adsbygoogle, html, rand;
                rand = Math.random();
                html = '<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-XXXXXX" data-ad-slot="XXXXXX"  data-ad-region="page-' + rand + '"></ins>';
                $(element).append(html);
                return (adsbygoogle = window.adsbygoogle || []).push({});
            });
        }
    };
}]);

Note: Change the “data-ad-client” value to your adsense pub id from google and in “data-ad-slot” add your adsense ad slot from google.

Step3: Include the below html tag in to your angularjs html templates.

<div google-ad></div>

Credits :
leonardteo/google-ads-test-angularjs
Template

Demo