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.
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.
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.
I am attempting to get a very simple HTML/JavaScript application working for SDK 5.0b, the instructions for which are here...
http://samsungtvdev.blogspot.com/2013/04/smamsung-smart-tv-how-to-write-hello.html
I can launch VirtualBox 4.2.16 and see my application in the menu for the emulator. However, when I launch it, the background is black, and I don't see my application. I also see a bunch of warnings in the emulator about 'RegisterType()' and other functions not being available.
I tried posting this on the Samsung SDK forum, but it's pretty dead over there. I also tried the suggestion here, but copying the application manually also doesn't seem to work. Anyone have any ideas on how I can get this working?
Edit: Here is the HTML code. This isn't more than a "hello world" example.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HelloWorld</title>
<!-- TODO : Common API -->
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"> </script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"> </script>
<!-- TODO : Javascript code -->
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
<!-- TODO : Style sheets code -->
<link rel="stylesheet" href="app/stylesheets/Main.css" type="text/css">
<!-- TODO: Plugins -->
</head>
<body onload="Main.onLoad();" onunload="Main.onUnload();">
<!-- Dummy anchor as focus for key events -->
<!-- TODO: your code here -->
<div id="outputDiv"></div>
</body>
</html>
This is the JavaScript code.
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var Main =
{
};
Main.onLoad = function()
{
// Enable key event processing
this.enableKeys();
widgetAPI.sendReadyEvent();
alert("App loaded!");
};
Main.onUnload = function()
{
};
Main.enableKeys = function()
{
document.getElementById("anchor").focus();
};
Main.keyDown = function()
{
var keyCode = event.keyCode;
alert("Key pressed: " + keyCode);
switch(keyCode)
{
case tvKey.KEY_RETURN:
case tvKey.KEY_PANEL_RETURN:
alert("RETURN");
widgetAPI.sendReturnEvent();
break;
case tvKey.KEY_LEFT:
alert("LEFT");
break;
case tvKey.KEY_RIGHT:
alert("RIGHT");
break;
case tvKey.KEY_UP:
alert("UP");
break;
case tvKey.KEY_DOWN:
alert("DOWN");
break;
case tvKey.KEY_ENTER:
case tvKey.KEY_PANEL_ENTER:
alert("ENTER");
document.getElementById("outputDiv").innerHTML += "<h1>Hello, World!</h1><br/>";
break;
default:
alert("Unhandled key");
break;
}
};
Here are the logs:
http://pastebin.com/mZULDGc6
1.) Look for misspellings, typos and missing commas. Samsung Smart TV SDK seems to be very strict with that and since you have no proper console, you don't get any errors if you forget a comma or something
2.) check your HTML/CSS
Maybe you should post your code so I can have a closer look.
EDIT: You forgot to add the scripts in your HTML head. You have to add every script file that you use in your project, such as Main.js. That would be
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
and also all Samsung SmartTV API script files that are required.
First what i see, you forgot "anchor" tag in html.
Not included external JS files in html page, and standard smart tv sdk files:
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"> </script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"> </script>
Then add
<body onload="Main.onLoad();" onunload="Main.onUnload();">
Are you sure that images loaded? Print it in console.
Why div block position inside canvas, move it outside. I think that code started with js error, so you don't see anything. Be more careful.
I had same issue and fixed it by adding background: red; for body tag in css.
I am currently developing a calendar system and I want some events/dates send directly to and ics file from the web calender.
Dhtmlxscheduler is exactly what I need. Writing the data to mysql works and it is reading the data too, but not to ics and from ics.
Here is the code I have so far:
<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_serialize.js" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_multisource.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.prevent_cache = true;
scheduler.config.lightbox.sections=[
{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
{name:"location", height:43, type:"textarea", map_to:"details" },
{name:"time", height:72, type:"time", map_to:"auto"}
]
scheduler.config.first_hour=4;
scheduler.locale.labels.section_location="Location";
//scheduler.config.details_on_create=true;
//scheduler.config.details_on_dblclick=true;
scheduler.init('scheduler',new Date(2009,10,1),"month");
scheduler.setLoadMode("month");
scheduler.load(["php/events.php","/ics/schedule.ics"]);
var dp = new dataProcessor("php/events.php");
dp.init(scheduler);
}
function show(){
alert(scheduler.toICal());
}
function save(){
var form = document.forms[0];
form.elements.data.value = scheduler.toICal();
form.submit();
}
function get(){
var form = document.forms[1];
form.elements.data.value = scheduler.toICal();
form.submit();
}
</script>
</head>
<body onload="init();">
<form action="../04_export/php/ical_writer.php" method="post" target="hidden_frame" accept-charset="utf-8">
<input type="hidden" name="data" value="" id="data">
</form>
It would be nice if you could help me. Thanks. Sorry that the post looks a bit strange. It is my first post with code....
Above code loads data from 2 sources in same time, which causes issue as one source is xml based and other is ical data.
scheduler.load(["php/events.php","/ics/schedule.ics"]);
need to be replaced with separate data loading
scheduler.load("php/events.php", "xml")
scheduler.load("ics/schedule.ics", "ical")