Add Google AdSense to a Single Page App - React, Angular, Vue, Next etc...
I recently integrated Google AdSense into my AngularJS blog and this is how I got it working.
The same steps can be used to add Google ads to any SPA (Single Page Application) including Angular, React, Vue etc.
1. Create some ad units in Google AdSense
If you don't already have an AdSense account you can sign up at https://adsense.google.com/.
Create some ad units in the Ads sections under By ad unit.
2. Include the Google ads script - adsbygoogle.js
After you've created an ad unit click on the Get code icon (<>) and copy the <script ...> tag from the top. Paste it into the base index.html page of your single page app (Angular, React, Vue etc).
The script should look like the following, but with your unique Google publisher id instead of ca-pub-XXXXXXXXXXXXXXXX.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>
3. Add a placeholder div for each ad unit
Create an empty div for each ad unit, you can write CSS rules to style and position them however you like.
The ad units can be placed in the base index.html file or any component of your app.
<body>
<div id="adsense-top" class="adsense-unit"></div>
...
<div id="adsense-side" class="adsense-unit"></div>
...
<div id="adsense-bottom" class="adsense-unit"></div>
</body>
4. Trigger/refresh Google ads on route change
Write a function to initialize/refresh the Google ad units and execute it on route change.
Below is a cut down version of how I do it on this blog, the code is AngularJS (v1) and jQuery so it's a bit old school now, but the principal is the same in the latest versions of any single page app framework including Angular 2+, React, Vue etc.
The initGoogleAds() function is called on each route change ('$stateChangeSuccess') and does the following:
- Sets the HTML for each ad unit to the
<ins ...>element provided in the Get code section of AdSense for each unit. - Calls
(window.adsbygoogle = window.adsbygoogle || []).push({})once for each ad unit to tell Google to display an ad in each<ins ...>element.
(function () {
'use strict';
angular
.module('app', ['ui.router'])
.config(config)
.run(run);
function config() {
...
}
function run($rootScope) {
// init google ads on route change event
$rootScope.$on('$stateChangeSuccess', function () {
initGoogleAds();
});
}
function initGoogleAds() {
// set html for ad units
$('#adsense-top').html('<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins>');
$('#adsense-side').html('<ins class="adsbygoogle" style="display:inline-block;width:250px;height:250px" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins>');
$('#adsense-bottom').html('<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins>');
// trigger adsense units
$('.adsense-unit').each(() => (window.adsbygoogle = window.adsbygoogle || []).push({}));
}
})();
Need Some JavaScript Help?
Search fiverr for freelance JavaScript developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!