Search Tutorials


Integrate Google Adsense with AngularJS | JavaInUse

Integrate Google Adsense with AngularJS

Video

This tutorial is explained in the below Youtube Video.

Overview

In this post we integrate Google Adsense with AngularJS
Our Project structure is as follows-
ang7_1
We require the following javascript files for this tutorial-
  • angular-route.js
  • angular.js
  • jquery.js

In the main.js we define the route. We also define the googleAd directive. 

window.app = angular.module('app', ['ngRoute']);

window.app.config([
  '$routeProvider', function($routeProvider) {
    $routeProvider.when('/page1', {
      templateUrl: 'pages/page1.html',
      controller: 'autoRefreshController'
    }).when('/page2', {
      templateUrl: 'pages/page2.html',
      controller: 'autoRefreshController'
    }).otherwise({
      redirectTo: '/page1'
    });
  }
]);

window.app.controller('autoRefreshController', [
  '$scope', function($scope) {
    console.log("autoRefreshController");
    $scope.rand = Math.random();
  }
]);

window.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:block' data-ad-client='ca-pub-765679256709911' data-ad-slot='1674676730' data-ad-format='auto'></ins>";
          $(element).append(html);
          return (adsbygoogle = window.adsbygoogle || []).push({});
        });
      }
    };
  }
]);
In the page1.html use the following google-ad tag. 
The ad is 
<div google-ad=""></div>

Our index.html will be as follows- 
<!DOCTYPE html>
<html>
  <head>
    <link href="scripts/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="scripts/jquery.js"></script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-route.js"></script>
    <script src="js/main.js"></script>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  </head>
  <body ng-app="app">
    <div class="container">
        <h1>
          Test Google Adsense
        </h1>
      </div>
      <div ng-view=""></div>
  </body>
</html>
Finally our pom.xml will be as follows. We have defined the tomcat plugin for deployment to tomcat. 
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.javainuse</groupId>
	<artifactId>angular-spring-module-2</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	
	<build>
		<plugins>
		<plugin>
           <groupId>org.apache.maven.plugins</groupId>
           <artifactId>maven-compiler-plugin</artifactId>
           <version>2.3.1</version>
           <configuration>
               <source>1.8</source>
               <target>1.8</target>
           </configuration>
       </plugin>
			<plugin>
				<groupId>org.apache.tomcat.maven</groupId>
				<artifactId>tomcat7-maven-plugin</artifactId>
				<version>2.2</version>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-war-plugin</artifactId>
				<version>2.4</version>
			</plugin>
		</plugins>
	</build>
</project>

Deploy the application and go to http://localhost:8080/angular-spring-module-2

ang7_2

Download Source Code

Download it - Google Adsense with AngularJS 

 
See Also

Creating a Simple AngularJS Application with ngRoute and Partials
Removing the # from the AngularJS URL
Use Google reCaptcha with AngularJS
Use AngularJS NgCloak directives Example

Popular Posts





See Also