Add DFP DoubleClick inside a Facebook Instant article - facebook

How can I add an DFP ad inside a Facebook Instant article? I use the DoubleClick service.
I need to know an example of what should I add inside the 'figure':
<figure class="op-ad">
<!-- Use this for your ads -->
<iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="50" width="320"></iframe>
</figure>
Thanks


I recommend using Doubleclick's GPT tag but with the caveat of placing the whole ad tag within the iFrame (as opposed to making calls to the head element). An example can be found below:
<figure class="op-ad"><iframe height=“250" style="border:0;margin:0;padding:0;" width="300”>
<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” (http://www.googletagservices.com/tag/js/gpt.js%E2%80%9D);
var node = document.getElementsByTagName(“script”)[0];
node.parentNode.insertBefore(gads, node);
})();
</script><script type="text/javascript">
googletag.cmd.push(function() {
googletag.defineSlot("/1234/travel/asia/food", [[300, 250]], "div-gpt-ad-123456789-1").addService(googletag.pubads()).setTargeting(“abc”, “xyz”).setTargeting(“123”, “456”);
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();
});
</script><div id="div-gpt-ad-123456789-1">
<script type="text/javascript">
googletag.cmd.push(function() { googletag.display(“div-gpt-ad-123456789-1”); });
</script></div>
</iframe>
</figure>


AdPlugg allows you to do this. Your code above would become:
<figure class="op-ad">
<!-- Use this for your ads -->
<iframe src="http://www.adplugg.com/serve/<your_adplugg_access_code>/html/1.1/index.html?zn=fb_zone_1" height="50" width="320"></iframe>
</figure>
Then from inside your AdPlugg account, you would drop in your tag from Google. You could also then rotate in affiliate network ads, your own direct buy ads, etc.
That should be all that you need but if you want, you can read more about how to set up Facebook Instant Article ads in a blog that I posted: Facebook Instant Article Ads.
Disclaimer: I work for AdPlugg.


Prepare a DFP integration static HTML file by using GPT like seen below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style>
<script type="text/javascript">
(function() {
var useSSL = 'https:' == document.location.protocol;
var src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
})();
</script>
<script type="text/javascript">
googletag.defineSlot('/YOUR_DFP_ACCOUNT_NUMBER/YOUR_ADUNIT_CODE', [300, 250], 'div-gpt-ad-1459514019072-0').addService(googletag.pubads());
googletag.enableServices();
</script>
</head>
<body>
<div id="div-gpt-ad-1459514019072-0">
<script type="text/javascript">
googletag.display('div-gpt-ad-1459514019072-0');
</script>
</div>
</body>
</html>
Save and host it somewhere like http://example.com/fbia-banner.html
And now call this URL by using Facebook Instant Article (FBIA) ad syntax :
<figure class="op-ad">
<iframe height="250" width="300" src="http://example.com/fbia-banner.html"></iframe>
</figure>
And test whole page code by using FBIA test tools.
Notes:
Using a proxy file like this solution isnot the best solution, it would be better if there was a direct DFP URL to serve. I tried DFP simplified url tags but it's not suitable to use in FBIA


Facebook complains about having "width" and "height" attributes on iframe tags, you should remove them.

Related

DoubleClick for Publishers "Ad unit did not render."

As I am completely newbie this issue will be probably an easy one for others.
My ads are not displayed on the web (various banners, multiple places, none shown).
On the www.motoraport.pl/stacje I expect 2 banners to be displayed on the right, but the slots are empty.
When debugging I get an info like
MRPrawa1
Slot size: 300x250Format: DivService: DFP
Ad unit did not fetch.
Ad unit did not render.
Ad fetch count: 1
Iframe type: none
Warnings:
Ad unit failed to fetch.
-or-
MRPrawa1
Slot size: 300x250Format: DivService: DFP
251 ms to fetch creative
Ad unit did not render.
Ad fetch count: 1
Iframe type: none
However if I click in the debug console Open Creative in New Window I see the banner images.
I thought there could have been a code mess up so I created simple localhost page
<!DOCTYPE html>
<html>
<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);
})();
googletag.cmd.push(function() {
googletag.defineSlot('/19844765/MRPrawa1', [300, 250], 'div-gpt-ad-1450140062768-3').addService(googletag.pubads());
googletag.defineSlot('/19844765/MRPrawa2', [300, 250], 'div-gpt-ad-1450140062768-4').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.pubads().enableSyncRendering();
googletag.enableServices();
});
</script>
</head>
<body>
<!-- MRPrawa1 -->
<!-- /19844765/MRPrawa1 -->
<div id='div-gpt-ad-1450140062768-3' style='height:250px; width:300px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1450140062768-3'); });
</script>
</div>
<!-- /19844765/MRPrawa2 -->
<div id='div-gpt-ad-1450140062768-4' style='height:250px; width:300px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1450140062768-4'); });
</script>
</div>
</body>
</html>
But the problem remains. Anybody could help?

After a couple days of pissing in the wind I accidentally discovered that all ad slots that are declared in <head/> must be implemented in <body/>.
In my case there were primarily 5 slots declared in head and 1-2 used in body depending on page.
Somehow this caused that all ads came up blank.
I hope this will help others to get through embedding DFP ads.

google dfp does not show up ads continuosuly

I have created a ad unit in google dfp and line item/order with clicks of 10000 with 3 days campaign. For one day it was showing the ad only once in a while in ad slot in my webpage. After that the rate increased but still sometimes it may show the ad slot on my webpage empty. Does anybody know how to setup or do some scripting so that once it starts showing up, it will show up continuously for anybody who visits the webpage until the campaign or that targets are achieved. On web there are discussions about auto-collapse of divs when ad is not fetched, but I want to keep the space for an ad continuously, it should not appear empty if ad is not fetched.
Code in website looks like this:
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Widgets Magazine</title>
<style type="text/css" media="screen">
</style>
<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>
</head>
<body>
<!-- Anywhere -->
<div id='div-gpt-ad-xxx-0' style='width:250px; height:250px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-xxx-0'); });
</script>
</div>
</body>
Thanks for the help.

Your Javascript code most likely is okay. The problem is on the server side, in the settings of your line item.
Based on the number of clicks and the length of the campaign you have configured, DfP will estimate the delivery speed to evenly distribute the ad impressions and/or clicks for the duration of the campaign.
In order to always serve an ad, you either:
create a new line item of type network or similar where you can configure to fulfill 100% of the remaining impressions (see Line item types and their delivery priorities), or
set the delivery speed of your line item to as fast as possible (see Change the delivery speed of a line item)
Note that DfP will completely stop serving the campaign once the delivery target (the number of clicks or ad impressions) has been reached.

Google+ Sharing - Passing hashes as parameter

In twitter, you can tell what hashtags to be included when pressing the tweet button, and that's done using the hashtags parameter.
Is there anything similar while sharing to Google+? I've read the Share documentation but found nothing like that (I care most about the Share Link method of sharing).
Do you know any ways of accomplishing that?

If your main interest is to be able to search your posts by hashtag, you can add hashtags to the snippet description. The hashtag will not be rendered differently from the rest of the text and will not be clickable though.
<html itemscope itemtype="http://schema.org/Organization">
<head>
<meta itemprop="name" content="Example">
<meta itemprop="description" content="
An #example of how to add #hashtags to the snippet description.">
<meta itemprop="image"
content="https://www.google.com/images/srpr/logo3w.png">
</head>
<body>
<div class="g-plus" data-action="share"></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>

Google Analytics code error implementing in .asp file

I am implementing Google Analytics in a form page.
The problem comes after the form is sent by a user.
In the form landing page, the GA tracking code is partly duplicated in the body, creating duplicated stats for the landing page.
I've checked my asp file and have no clue on what I could be doing wrong.
I hope someone can point me on the right direction, thanks in advance.
<head>
<%if Request.QueryString("enviado") = 1 then%>
<script type="text/javascript">
var google_conversion_id = 97885866;
var google_conversion_language = "es";
var google_conversion_format = "2";
var google_conversion_color = "ffffff";
var google_conversion_label = "BNPUCI6xqQIQ-ofj0gM";
var google_conversion_value = 0;
</script>
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="http:www.googleadservices.com/pagead/conversion/978895866/?label=BNPUCI6xqQIQ-ofj0gM&guid=ON&script=0"/>
</div>
</noscript>
<script language="javascript" type="text/javascript">
window.ysm_customData = new Object();
window.ysm_customData.conversion = "transId=,currency=,amount=";
var ysm_accountid = "1FJ1MOC128JN2MQEDCC45EREVMC";
document.write("<SCR" + "IPT language='JavaScript' type='text/javascript'" + "SRC=//" + "srv3.wa.marketingsolutions.yahoo.com" + "/script/ScriptServlet" + "?aid=" + ysm_accountid + ">
</SCR" +"IPT>");
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount, 'UA-10880766-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<%end if%>
</head>

I'm a little bit late, but maybe this helps other people as well.
When I understand this correct you are referring to the fact, that the GoogleAnalytics Tracking is fired twice.
If yes, I also had a similar problem on my page. The problem however did only occur in Firefox and Chrome, but not in Internet Explorer.
This problem was in my case related to a empty src tag in my code. In Firefox and Chrome "" means "this URI" and therefore my tracking was fired twice.
I could fix that by removing the yahoo pixel in my code.
You can read also: here for more info.

Using jQuery 1.4.2 and 1.6.1 but noConflict doesn't work

I'm using jQuery 1.4.2 for a fixed bar on my site that scrolls with the site as you scroll.
But I'm also using 1.6.1 for a facebook thing I'm doing, and when I add them together, the bar breaks and the facebook thing works, but when I add the noConflict in, the bar works, but the facebook breaks, so if you could look at my code, and help me?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" href="themes/default/jx.stylesheet.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict();
</script>
<script type="text/javascript" src="src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
mc$(document).ready(function() {
mc$("#floating-bar").jixedbar();
});
</script>
<style type="text/css">
body {
margin: auto;
background-image: url(template.png);
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
<div id="floating-bar">
<ul>
<li title="Home"><img src="icons/home.png" alt="" /></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title="Around The Web"><img src="icons/network.png" alt="Share" />
<ul>
<div id="fb-root"></div>
<!-- USE 'Asynchronous Loading' version, for IE8 to work
http://developers.facebook.com/docs/reference/javascript/FB.init/ -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '209445949091775',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<li><a id="share_button" href="#"><img src="icons/facebook.png" title="Facebook" /> Facebook</a></li>
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'Atomic Star Studios',
link: 'http://www.facebook.com/pages/Atomic-Star-Studios/228192187207829',
picture: 'http://www.atomicstarstudios.com/logo.jpg',
caption: 'http://www.atomicstarstudios.com/',
description: 'This is the content of the "description" field, below the caption.',
message: 'Visit Atomic Star Studios for excellent prices on great printg and professional design! We Have All Your Marketing Needs!!!'
});
});
});
</script>
<li><img src="icons/twitter.png" title="Twitter" /> Twitter</li>
</ul>
</li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title"Top Pages">Top Pages
<ul>
<li title="About"><img src="icons/info.png" alt="About" /></li>
<li title="Products"><img src="icons/blogs.png" alt="Products" /></li>
<li title="Portfolio"><img src="icons/block.png" alt="Portfolio" /></li>
</ul>
</li>
</ul>
<span class="jx-separator-left"></span>
<div class="text-container">Like us on Facebook!</div>
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pages/Atomic-Star-Studios/228192187207829&layout=button_count&send=true&show_faces=false&width=100&action=like" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:30px;" allowTransparency="true"></iframe>
Follow #atomstars
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<span class="jx-separator-left"></span>
<ul>
<li title="Facebook"><img src="icons/facebook.png" alt="" /></li>
<li title="Twitter"><img src="icons/twitter.png" alt="" /></li>
</ul>
<span class="jx-separator-left"></span>
<ul>
<li title="Chat with us Live!"><img src="http://www.atomicstarstudios.com/livezilla/image.php?id=04&type=inlay"></li>
</ul>
<span class="jx-separator-right"></span>
</div>
</body>
</html>

There are two problems with your code.
First, you should call the noConflict in-between both jQuery requests, not after the second one. You need to load the modules you need with each version of jQuery with the version so that when you call noConflict, references to the plugins are moved with it. You should also add "true" to noConflict so that all references to jQuery are removed before loading the second one:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
For more information, see the jQuery.noConflict documentation.
With that said, you should really consider find a way to not have to do this. It is not an elegant way to use jQuery.
TO ANSWER #TGR: Try this for yourself and you'll see for yourself that my solution works perfectly fine:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jixedbar.googlecode.com/svn/trunk/src/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
var mc$ = jQuery.noConflict(true);
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
alert('jQuery ' + mc$.fn.jquery + ': ' + ( typeof mc$.fn.jixedbar ));
alert('jQuery ' + jQuery.fn.jquery + ': ' + ( typeof jQuery.fn.fixedbar ));
});
</script>
<title>6367968</title>
</head>
<body>
<p>6367968</p>
</body>
</html>
The first alert will show "jQuery 1.4.2: function" while the second one will show "jQuery 1.6.1: undefined".

load jQuery 1.4
load all plugins which need to use 1.4
use noConflict
load jQuery 1.6
The problem is that jQuery plugins tend to be written this way:
(function($) {
// plugin code using $ for jQuery calls
})(jQuery)
i. e. they have an internal copy of whatever window.jQuery was at the time the plugin loaded, and you cannot change that afterwards.
update: a little more detail on how noConflict works (was too long for the comments). When you load jQuery, it creates an object containing all its functions and data, and sets window.$ and window.jQuery to that object. The old value of window.$ and window.jQuery is saved in the object.
When you call noConflict, it restores the saved value (by default for $; if you call it with true, also for jQuery). This is useful if you had something in those variables before loading jQuery, and don't want it to be overwritten. E.g. if you loaded things like this:
load jQuery 1.6
load jQuery 1.4
call noConflict(true)
then the first step would put jQuery 1.6 into $ and jQuery, the second would overwrite them with 1.4, and noConflict would restore $ and jQuery to the 1.6 version.
But since you load 1.4 first, and call noConflict between the two, the old value for $ and jQuery which is restored is undefined, which is not particularly useful, and will be overwritten by 1.6 anyway, so the noConflict call does not do anything useful beyond returning the value of $ which then can be stored by some other name ($mc in this case). var $mc = $; would work just as well for that.
As for the plugins, the auto-executing function copies the value of window.jQuery at the moment the plugin is loaded, and it does not matter at all what happens to window.jQuery afterwards:
window.jQuery = 'foo';
(function($) {
window.fun = function () {
console.log($);
}
})(jQuery);
window.jQuery = 'bar';
fun(); // will log 'foo'