How to See if You've Put in Your Google DoubleClick for Publisher's GPT Tag in Properly
Google DoubleClick for Publishers (DFP) Small Business is a free ad management solution that helps growing publishers sell, schedule, deliver, and measure all of their digital ad inventory.
All you have to do to get your ad to display is generate a tag (google publisher tag or GPT) and paste it a html page of your site. In the example below, we’ve pasted the tag in the head and body tags of the layout html page of this blog.
There are two parts to GPT tag.
The first part is within the head tags and it makes a call to Google to push the ads. It looks kind of like this:
<!DOCTYPE html>
<html>
<head>
<title>How to See if You've Put in Your Google DoubleClick for Publisher's GPT Tag in Properly – Team Melbourne - RGSoC 2015 – G'day mate! Vi and Sarah working on Discourse.</title>
<meta charset="utf-8" />
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'>
<meta name="description" content="Google DoubleClick for Publishers (DFP) Small Business is a free ad management solution that helps growing publishers sell, schedule, deliver, and measure all of their digital ad inventory.
" />
<meta property="og:description" content="Google DoubleClick for Publishers (DFP) Small Business is a free ad management solution that helps growing publishers sell, schedule, deliver, and measure all of their digital ad inventory.
" />
<meta name="author" content="Team Melbourne - RGSoC 2015" />
<meta property="og:title" content="How to See if You've Put in Your Google DoubleClick for Publisher's GPT Tag in Properly" />
<meta property="twitter:title" content="How to See if You've Put in Your Google DoubleClick for Publisher's GPT Tag in Properly" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="/style.css" />
<link rel="alternate" type="application/rss+xml" title="Team Melbourne - RGSoC 2015 - G'day mate! Vi and Sarah working on Discourse." href="/feed.xml" />
<!-- This is the beginning of the GPT -->
<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>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/publisher_id/ad_id', [728, 90], 'div-gpt-ad-1441363470466-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
<!-- This is the end of the GPT -->
</head>
The second part is the location of the ad and you can put there anywhere in the body tags of the page. It could look like this:
<body>
<div id="main" role="main" class="container">
<article class="post">
<h1>How to Add More Functions to a Model/Controller in Ember via a Plugin in 4 Steps</h1>
<div class="entry">
<p>This post aims to show you how to extend the functionality for a model or controller in a plugin. A plugin hooks into the core code to deliver to users some kind of functionality e.g. displaying ads.
This post will be useful if you have an Ember App, or a Rails App using Ember as the front end.</p>
<p>Hopefully it’ll work for you as it works for us. Thanks also to the amazing <a href="https://twitter.com/eviltrout">Robin</a> for providing this guidance that we can share with you.</p>
<h3 id="step-1-import-your-modelcontroller-into-your-initializer-file">Step 1: Import Your Model/Controller into Your Initializer file.</h3>
<p>You’re in your plugin folders.
Create an initializers folder and then within that, create a file called <strong>some-initializer-file.js.es6</strong> and add import.</p>
<div class="highlighter-rouge"><pre class="highlight"><code>import NameofController from 'path';
For example:
import PostModel from 'discourse/models/post';
import ComposerController from 'discourse/controllers/composer';
</code></pre>
</div>
<h3 id="step-2-reopen-the-model-or-controller-that-you-imported--add-whatever-you-wanted-to-add">Step 2: Reopen the Model or Controller That You Imported & Add Whatever you Wanted to Add</h3>
<p>So, in the same initializer file you can add that function or whatever you wanted to add to extend that model or controller.
The <code class="highlighter-rouge">export default, name and initialize</code> just get the thing going and so that it can display it’s parts.</p>
<div class="highlighter-rouge"><pre class="highlight"><code>export default {
name: 'extend-something',
initialize() {
NameofController.reopen({
nameOfFunction: function() {
write what it does...
}.property(something)
});
}
}
An Example:
export default {
name: 'extend-post-model',
initialize() {
PostModel.reopen({
postSpecificCount: function() {
return this.get('post_number') % 2 === 0;
}.property('post_number')
});
}
};
</code></pre>
</div>
<h3 id="step-3-put-it-altogether">Step 3: Put it Altogether</h3>
<p>Your initializer file should look like this when putting everything together (using the post example):</p>
<div class="highlighter-rouge"><pre class="highlight"><code>import PostModel from 'discourse/models/post';
export default {
name: 'extend-post-model',
initialize() {
PostModel.reopen({
postSpecificCount: function() {
return this.get('post_number') % 2 === 0;
}.property('post_number')
});
}
};
</code></pre>
</div>
<h3 id="step-4-apply-your-function-that-is-extended-from-a-model-or-controller-in-ember-to-a-handlebars-thinggo">Step 4: Apply Your Function that is Extended from A Model or Controller in Ember to A Handlebars Thinggo.</h3>
<p>Using handlebars, just put an if statement around whatever you want to apply the function to.</p>
<p>For example, in Discourse > Templates > Connectors > post-bottom.hbs, we did:</p>
<div class="highlighter-rouge"><pre class="highlight"><code>
</code></pre>
</div>
<p>This piece of code means that, we’ll display the ad if it meets the function requirements. So display the ad after every 2nd post.</p>
<p>I don’t know why but doing certain things add to your propensity to do other things.</p>
<p>For example, when I was working in a journalist’s bureau, I started drinking wine at home nearly every night.
Now, everytime that I’m coding but not in a pair, I’m listening to early 2000s hip hop and r&b. Last night, I even listened to Peter Andre, what the?</p>
<p>Meanwhile, I really want to be an extra in one of these videos</p>
<p><a href="http://www.youtube.com/watch?feature=player_embedded&v=GeZZr_p6vB8 " target="_blank"><img src="http://img.youtube.com/vi/GeZZr_p6vB8/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a></p>
<p>Nelly, in the unlikely chance that you are reading this coding blog post, please… please… choose me if you’re doing another music video! I don’t look anything like the girls in your videos but I make up for it in Australian humor and coding skills <3</p>
<p>Anyway, hope this helps some aspiring plugin author somewhere…</p>
<p>xox Ladydanger</p>
</div>
<div class="date">
Written on August 4, 2015
</div>
</article>
<!-- This is the start of the second part of the GPT ad -->
<div id='div-gpt-ad-1441363470466-0' style='height:90px; width:728px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1441363470466-0'); });
</script>
</div>
<!-- This is the end of the second part of the GPT ad -->
</div>
<div class="wrapper-footer">
<div class="container">
<footer class="footer">
<a href="mailto:teammelbournekoala@gmail.com"><i class="svg-icon email"></i></a>
<a href="https://github.com/team-melbourne-rgsoc2015"><i class="svg-icon github"></i></a>
<a href="https://www.twitter.com/teammelbkoala"><i class="svg-icon twitter"></i></a>
</footer>
</div>
</div>
</body>
</html>
The thing is there is substantial waiting time when you put your ad tag in before your DFP ad is served or displayed, it’s just a DFP thing. The time lag can vary as once, it took nearly overnight for my ads to start serving.
But there is one thing you can do during that waiting time. That is to check that you’ve put your GPT (that’s the tag that’s provided by DFP) in correctly. Because, if you’ve put in your GPT in correctly, you just have to wait until your ads start serving from DFP’s side. The other thing is that if you don’t know if your tag is in correctly, you may be waiting and the serving of the ad is due to a problem on your side.
So… one way to check if you’ve put your GPT Ad in correctly is to use ?google_force_console. Here’s how to use it (with screenshot pictures):
Step 1 - Add ?google_force_console to the page where your ad is expected to display.
After adding your google tag to the right places, navigate to the page where you ad is expected to display and put ?google_force_console at the end of the URL. The URL is the website’s address (see the picture below).
Step 2 - Check the Page Request to see if Your Page has been Tagged Properly
The google console should appear. Click on Page Request and the green tick means that you’ve put in the GPT correctly.
Step 3 - Check the Details of the Ad Slot
Here you’ve making sure that the publisher ID is correct, the ad slot name matches that in your DFP console and all the other details are there. When you first start you should see an empty container (and after 2-8 hours that should fill with an ad).
Another way to check if your ad is just waiting on google to display as opposed to being an error on your part is to:
- Check on the page and there should be some white empty space where the ad is supposed to go.
- Right click on the empty space and choose “Inspect Element”
- You should see something like the below image - if you see a “div-gpt-ad-…”, it means that the code is running (see below image).
- Navigate to the ‘console’ in the same window and you should see a blank with no errors (see below image)
Inspect Element and Look Out for the GPT
Navigate to the ‘console’ and Make Sure There Are No Errors
These are two ways to check if your code is fine and set up properly. Now all that’s waiting for now is for DFP to serve the ad.
by @adcpoywriter