w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
Home Script Angularjs
Google ads in Angular js app

Google ads in Angular js app

W3TWEAKS by W3TWEAKS
November 26, 2019
in Angularjs
0

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

Iterate javascript object keys using angularjs ngRepeat

October 27, 2020
0
Enable and Disable drop down box using angularjs ngDisabled

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

Tags: adsenseAngularjsdirectivesgooglegoogleadsgoogleadsense
Previous Post

YouTube V3 API to get single Video Information using Angular JS

Next Post

Get YouTube API Credentials

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Iterate javascript object keys using angularjs ngRepeat

Iterate javascript object keys using angularjs ngRepeat

by W3TWEAKS
October 27, 2020
0
0

This tutorial will explain how to get or iterate the JavaScript Object keys / Properties using AngularJs ngRepeat. It is...

Enable and Disable drop down box using angularjs ngDisabled

Enable and Disable drop down box using angularjs ngDisabled

by W3TWEAKS
November 26, 2019
0
0

In AngularJs we can able to disable or enable the dropdown like jQuery does. Using ngDisabled function in angularjs we...

Select all and Deselect all checkboxes in angularjs

Select all and Deselect all checkboxes in angularjs

by W3TWEAKS
October 22, 2021
0
0

This tutorial will explain how to achieve check all and uncheck all checkbox using angularjs and listing all checked values...

Angularjs and JSON list infinite scroll

Angularjs and JSON list infinite scroll

by Vetrivel Pandian
September 19, 2019
0
0

JSON is more better way to transmitting the data in server to client. When you have develop large data application,...

Next Post
Get YouTube API Credentials

Get YouTube API Credentials

Discussion about this post

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube