DFP Ads Tag Not Rendering with Dynamic DIV Injection
Loading the Dynamic Rotator Kind of Dynamic HTML Style appended into the body using the Ajax Call. The ADs DIV ID will be appended dynamically into the body of the Rotator in the Collapsed Mode.
Using DFP Iframe Ads with size 180x150
On Initial Page Load Not Having the DIV ID in the Web Page Source.
I have an Scenario of Appending the DIV Id's Dynamically into the body of the web Page through Ajax Call.
Code Flow:
Added the GPT Library Inclusion inside the HEAD Tag of the Web Page.
<head>
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
</head>
AS well Defining the SLOT in the cmd.push() method in the HEAD Tag which will make the Call to the DFP Server. Disabled the Initial Load ,because the define slot will check for the DIV ID during the initial page load which throws error.
<head>
<script type='text/javascript'>
var slot1 = '';
googletag.cmd.push(function() {
slot1 = googletag.defineSlot('/12638013/Connect_180x150', [180, 150], 'div-gpt-ad- 1389885200465-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.pubads().disableInitialLoad();
googletag.enableServices();
});
</script>
</head>
Once the Page get Loads with the above scripts in the HEAD Tag.Through Ajax Call appending the DIV ID into the body of the web page.
jQuery('body').append('<div id="div-gpt-ad-1389885200465-0" style="width:180px; height:150px;"><script type="text/javascript">googletag.cmd.push(function() { googletag.display("div-gpt-ad-1389885200465-0"); });</script></div>');
After the DIV ID is rendered Dynamically into the web page. Do an Refresh of the ads slot defined in the HEAD Tag.
googletag.pubads().refresh([slot1]);
End Result:
Verified the Above Page with the Google Debug Console.
The Page Request goes without any errors, states that Page Tagged Correctly.
852 ms to render page 491 ms to fetch ads 0 ms to render ads
Status Time Description
Information Start Created slot: /12638013/Connect_180x150_0
Information 1 ms Google service JS loaded
Information 1 ms Created service: publisher_ads
Information 1 ms Associated service "publisher_ads" with slot "/12638013/Connect_180x150".
Information 2 ms Using single request mode to fetch ads.
Information 2 ms Fetching GPT PubAds implementation
Information 2 ms Invoked queued function. Total: 1. Errors: 0.
Information 57 ms GPT implementation fetched.
Information 759 ms Calling fillslot.
Information 773 ms Invoked queued function. Total: 2. Errors: 0.
Information 852 ms Page load complete
Information 7090 ms Refreshing ads.
Information 7135 ms Fetching ad for slot: /12638013/Connect_180x150
Information 7626 ms Receiving ad for slot: /12638013/Connect_180x150
Information 7626 ms Rendering ad for slot: /12638013/Connect_180x150
Information 7626 ms Completed rendering ad for slot: /12638013/Connect_180x150
But the Ads Not Rendered inside the rotator into which the DIV is dynamically injected.
Anything I missing out ? Suggestions will be useful for me.
Answer
Was having the same issue myself for ages.... then I found this: https://plugins.jquery.com/dfp/
You can basically drop all the Google JS and use the 2-3 line solution provided. The only obstacle I came up against was missing the "enableSingleRequest" option.... needed to set it to false if you're loading ads more than once on a page.