Showing same dfp ads in a single page web application

Question

I have a single page web application which contains dfp ads. I have two dfp adunits that Iam firing and they are placed in between the content which is a list of articles for a particular category.

When I click on another category,it just loads articles for different category(doesnt change the url in address bar) and triggers the same ads. So this is like triggering the ads on the same page.

The ads dont show up the second time and this is because you cant use the same adunits on the same page.

Since I cannot use the refresh function provided by dfp since my DOM is reconstructed everytime, is there any way I can do this?.

Answer 1

If you are using jQuery take a look at the plugin I made which wraps DFP and allows you to use it quite easily within single page apps.

This is a demo using turbolinks which will be similar to your single page app:

http://coop182.github.io/jquery.dfp.js/dfptests/demo1.html

Any more questions just let me know.

Edit: here is another Single page example - http://coop182.github.io/jquery.dfp.js/dfptests/spa.html

Answer 2

There are few takeaways from this question. The dfp plugin as well as normal googletag implementation should work for a single page app, just that two requirements should be fulfilled

1. enableSingleRequest should NOT be set to true. In case of dfp plugin by Matt you should pass enableSingleRequest:false so that he doesn't set it to true. This is because if you set it to true you cant raise more request on the same page to fetch ads. Also enableSingleRequest(false) also fails.

2. When you are triggering ads dynamically i.e without reloading page; make sure to start with fresh containers where the ads will be placed. The exact reason for this is still not confirmed but seems like that is the way googletag works internally.

Please add if you have any further comments.

Answer 3

Do it the hard way:

function myGoogleTagLoaderFn(callback) {
    // reset googletag lib
    window.googletag = null;

    // we're using requirejs, so we have to do this as well
    window.requirejs.undef('http://www.googletagservices.com/tag/js/gpt.js');

    myRequireOr$getScriptFn('http://www.googletagservices.com/tag/js/gpt.js', function success() { callback(); });
}

Don't worry about loading the library on every page load, this is the same as in a non-singlepage site, and the lib sends reasonable cache headers. The downside of course is that the script gets re-evaluated everytime. The upside is you can use singleRequest mode this way.