Is possible to set custom data on a DFP ad creative, in the console panel, and then reuse them on the front end of your web site?
For example let say I have an ad, that have a list of creatives.
Depending on the creative it is displaying, which has a custom field with a number. With javascript I want to read this number on my web page, and do different actions depending on (change title of document or activate an app related to the DFP).
More over is possible to display in an Ad a custom js application (ex. a calculator) which the user can interact with it?
I didn't manage to find a way to extract creative's custom fields via javascript. Most likely it's not exposed on the page because it's been designed for a slightly different purpose:
These optional fields can be used to organize objects in reports. They're created in the "Admin" tab. They don't affect ad serving or delivery
But you can do it differently in a number of ways:
bind to creative IDs - if a particular creative id is shown do some actions of your choice. These IDs are available in your DFP 'creatives' grid.
if you're not limited to image creatives you can use 3rd party creatives with a js code that would communicate to the parent page and pass some data to your js handler installed on the parent page. As DFP uses friendly iframes (http://www.iab.net/media/file/rich_media_ajax_best_practices.pdf) you do have access to the parent page from inside your ad
A dirtier approach - you can put some service data into the alt field which is reachable inside the ad from the parent page
There's also an attribute event.labelIds available in the event handler but it's empty despite some labels associated with my testing creative
Here's the code illustrating p.1 and p.3:
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
if (!event.isEmpty) {
var slotId = event.slot.getSlotElementId();
var iframe = document.querySelector('#' + slotId + ' iframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
var img = iframeDoc.querySelector('img');
if (img && img.alt) {
console.log('Got alt: ' + img.alt);
}
if (event.creativeId) {
console.log('Got creative id: ' + event.creativeId);
}
}
});
Here it is live: https://jsfiddle.net/50b4npw8/
You can find some additional info on GPT events here
Related
We have an issue with GA where conversion sources are being lost after a user clicks on a link to our site, goes to the site, and then logs in using Facebook.
My understanding from GTM tips - implement referral exclusions is that our site sees the document.referrer as coming from Facebook and starts a new session, losing the original referrer. If we know the landing page on our site the user sees after logging into Facebook, is it possible to add code to exclude the FB referrer only for that page? I.e, on that one page we have something like (from the linked article):
function() {
var referrals = [
'facebook.com'
];
var hname = new RegExp('https?://([^/:]+)').exec({{Referrer}});
if (hname) {
for (var i = referrals.length; i--;) {
if (new RegExp(referrals[i] + '$').test(hname[1])) {
return null;
}
}
}
return {{Referrer}};
}
We can't simply add facebook.com to the GA exclusion list, as we have campaigns running on Facebook as well, so we'd still need visibility to organic traffic coming from Facebook.
You can copy GA tag and modify the copy with this code. Then fire that copy only on pages where you need to block referrer and block original GA tag on same pages.
If you don't want to have multiple GA pageview tags then use Lookup Table variable based on page paths. For some pages this variable should return your code as a Custom JavaScript variable and a default value should be {{Referrer}}.
We are using Google Tag Manager to manage Java scripts for 3rd party services like Facebook retargeting pixel. In China, Facebook is blocked as a service so whenever a user opened the site it would try to work the script but eventually go into timeout because the firewall blocks the script from loading.
Is there an ability to exclude Facebook pixel script by condition? What is the best solution to define if Facebook is blocked for the current user?
You need a trigger which checks the value of a variable. This variable must return true/false whether facebook can be loaded or not.
You could try this code as your variable (custom JS code in GTM interface). Replace the facebookUrl value according.
function (){
var facebookUrl = "..." // your facebook ressource URL
var http = new XMLHttpRequest();
http.open('HEAD', facebookUrl);
http.send();
return http.status < 500;
}
SO here's what I am after. I have a FB page tab that runs the content of the site https://site.com/
I set up a FB share link to share a page aboutus.html. When I share it FB allows me to share this URL https://site.com/aboutus.html, but how can i send the traffic directly to the iFrame on the page tab? For example https://www.facebook.com/fan_page/app_331267943480920398/whatever_aboutus.html
I know it is possible because I saw it one day - cant remember now where.
Thanks.
You can't pass in filenames this way, that's only supported on Canvas Apps.
The best workaround to replicate this is using the app_data parameter. Basically, have your landing page (as defined in your app settings), be some kind of server side script which listens to the Signed Request, specifically the app_data parameter. Then you have that script load content based on the contents of that.
So as an example, let's imagine I want to load http://mybasedomain.com/foo.php or http://mybasedomain.com/bar.php. I direct users to https://www.facebook.com/PAGENAME/app_APPID?app_data=foo or https://www.facebook.com/PAGENAME/app_APPID?app_data=bar, then on my landing page, I have a simple if/else statement to parse that and render the relevant content -
<?php
// Assumes you have this parse_signed_request function - https://gist.github.com/872837
// And a $config array, which contains your app_secret
$signed_request = parse_signed_request($_REQUEST['signed_request'], $config['AppSecret']);
if ($signed_request['app_data'] === 'foo') {
include('foo.html');
} else if ($signed_request['app_data'] === 'bar') {
include('bar.html');
} else {
include('index.html');
}
I want to create a flash Facebook application in which, after pressing a button, the user will be able to browse his/her photo albums and choose a photo. How should i do that? What will be the code under the button to gain authentication from any user using this application?
Thanks.
I am currently writing a facebook application for a university assignment that will allow the user to do everything you can do in facebook, but via the flash player window. You will need a few basic things happening in order to do it.
User log in and authentication - this must be done via Facebook - using OAuth authentication, and meeting all of facebook's security policies
register the application with facebook
Use the Graph API (facebook's developer's toolkit) to get the necessary functions that will communicate with facebook via flash.
In Flash itself you will use a bunch of URLRequest functions to send out to FB for information, then you will need to retrieve that data responses and store them to variables (extracting data with a few lines of code is easy, something like this;
//initialise variables
public var photoURL:String;
var Request:URLRequest = new URLRequest("http://www.whatever the url for the graph api service you are using which is founf from FB");
//that ^^ will send off a request for the url, you then want to use the returned data by registering an event handler like this below
functionName.addEventListener(onComplete, completeHandler);
functionName(event, EVENT)
{
var loader:URLLoader = new URLLoader(Request);
var data:XML = new XMLData(load.loader); //i think this is right but not 100% sure, fiddle with it
//then you want to extract the data that is returned, for example, extracting xml data from a rest request works by hitting data from the xml by specifying a path to the object you want. an example of xml is this <rsp stat="ok"><photos ......more code="morecode"><photo url="url of photo"></photo</photos> so you can hit the url in that example like this;
photoURL = data.photos.photo.#url; //this line will grab the photo url for you, allowing you to dynamically create an array and assign photos to the flash stage according to the url you get
}
this is fairly advanced stuff and I am assuming that you have some decent knowledge on AS3, XML, and the FB API, if you need more help just reply
I have been searching around the web to find out how to access the current tabs DOM to extract information out of a page from the background.html. So far I have had no luck, or at least nothing I could get to work properly.
To state the problem simply. I would like to get src of a iFrame on the page. Any Suggestions?
One way, you an treat this as a single one time request to the content-script which will fetch the dom you want to access.
http://code.google.com/chrome/extensions/messaging.html#simple
Basically, your content script sets up the listener:
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
if (request.greeting == "hello")
sendResponse({farewell: "goodbye"});
else
sendResponse({}); // snub them.
});
And your background page sends a single lived request:
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {
console.log(response.farewell);
});
});
When you send your response, you send it as JSON data, you can fetch whatever you want (such as html, dom, text, etc).
That is currently the only way to let the background page know anything about the contents of a page. Remember you would need content scripts and tab permissions.