TRAFFIC WALLPAPER AD (WITH CLICK FUNCTION)

Author: DFPHelp Category: Help Topics 19 Feb 15

Yes, trafficking a wallpaper Ad in DFP SB is possible.

Wallpaper Ad is served using a AdUnit of size 1×1, and is implemented on the webpage with no special requirement, and same as other IAB size (728×90, 300×250, 160×600 etc.) AdUnits.

Step 1: Ensure that you’ve the 1×1 AdUnit code (sync only) implemented on the page that you want to serve wallpaper Ad on.

Step 2: Create a line item in DFP with inventory size 1×1, and target this Ad to the Ad Unit that you created for the 1×1 wallpaper.

Step 3: Select Custom creative type, and use the code snippet given below to show your wallpaper Ad. Along with the custom code you’ll need to upload the wallpaper image, and replace the placeholder in the code snippet with the File Macro.

Step 4: Set the Ad live in DFP

Wallpaper Code Snippet: Field marked in bold red are to be replaced accordingly

var accClickUrl = “%%CLICK_URL_UNESC%%CLICK URL GOES HERE“;

var accClickTarget = “_blank”;

document.write(‘<style>’);

document.write(‘body {‘);

document.write(‘background-image: url(“IMAGE URL GOES HERE“);’);

document.write(‘background-repeat: no-repeat;’);

if(‘top’==’top with offset’) {

document.write(‘background-position:center 0px;’);

}else{

document.write(‘background-position:center top;’);

}

if(‘FFFFFF’!=””)document.write(‘background-color: #FFFFFF;’);

document.write(‘background-attachment: fixed;’);

if (accClickUrl != “”)document.write(‘cursor: pointer;’);

document.write(‘}’);

if (accClickUrl != “”)document.write(‘body > *{cursor: default;}’);

document.write(‘</style>’);

if (accClickUrl != “”){

function OpenWin(page) {

if(accClickTarget==”_blank”)

window.open(page);

else

document.location=page;

}

accBgClickEvent=function(e){var

bglink=accClickUrl;EE=e?e:event;if(!EE)return;var

tg=EE.target?EE.target:EE.srcElement;if((!tg||tg.tagName!=”BODY”)&&tg.parentNode

.tagName!=”BODY”)return;var BackLink=OpenWin(“”+bglink);};

document.onclick= accBgClickEvent;

}

document.write(”);

</script>

Note: This snippet might not work on all sites. Please check with your webmaster to get it working for your site if need be.

About the Author

DFPHelp

29 Comments

Bablu Chakma February 26, 2015 at 6:01 am

What is file “FILE-MACRO”? Can you please tell me?

Reply

DFPHelp February 26, 2015 at 1:26 pm

When you use custom creatives, your custom code might have reference to the image/flash file on a remote server, or a placeholder to add the reference to these files. You can either have it on a third-party hosting space or just host within DFP in Custom creative type. Once you upload the file, you can replace the placeholder with the file macro (you’ll find a file macro button at the bottom of the custom code entry field, which allows you to select the location of the file you uploaded within DFP).

Let me know if this makes sense.

Reply

Bablu Chakma March 31, 2015 at 7:03 am

Why this is not working? It is saying “One of the following macros is required in code snippet: %%VIEW_URL_UNESC%%, %%VIEW_URL_ESC%%.”

Link URL: http://thegrandslams.com/
Folder Image: http://videos.theonion.com/ads/2014/06/Dennys_o-section_100814.jpg

var accClickUrl = “%%CLICK_URL_UNESC%%http://thegrandslams.com/“;
var accClickTarget = “_blank”;
document.write(‘’);
document.write(‘body {‘);
document.write(‘background-image: url(“http://videos.theonion.com/ads/2014/06/Dennys_o-section_100814.jpg-%%CLICK_URL_ESC%%“);’);
document.write(‘background-repeat: no-repeat;’);
if(‘top’==’top with offset’) {
document.write(‘background-position:center 0px;’);
}else{
document.write(‘background-position:center top;’);
}
if(‘FFFFFF’!=””)document.write(‘background-color: #FFFFFF;’);
document.write(‘background-attachment: fixed;’);
if (accClickUrl != “”)document.write(‘cursor: pointer;’);
document.write(‘}’);
if (accClickUrl != “”)document.write(‘body > *{cursor: default;}’);
document.write(‘’);
if (accClickUrl != “”){
function OpenWin(page) {
if(accClickTarget==”_blank”)
window.open(page);
else
document.location=page;
}
accBgClickEvent=function(e){var
bglink=accClickUrl;EE=e?e:event;if(!EE)return;var
tg=EE.target?EE.target:EE.srcElement;if((!tg||tg.tagName!=”BODY”)&&tg.parentNode
.tagName!=”BODY”)return;var BackLink=OpenWin(“”+bglink);};
document.onclick= accBgClickEvent;
}
document.write(”);
document.write(”);

Can you please have a check?

Reply

DFPHelp April 3, 2015 at 4:13 pm

Hi Bablu,

Please use the below

var accClickUrl = “%%CLICK_URL_UNESC%%http://thegrandslams.com/“;
var accClickTarget = “_blank”;
document.write(‘’);
document.write(‘body {‘);
document.write(‘background-image: url(“%%VIEW_URL_UNESC%%http://videos.theonion.com/ads/2014/06/Dennys_o-section_100814.jpg-%%CLICK_URL_ESC%%“);’);
document.write(‘background-repeat: no-repeat;’);
if(‘top’==’top with offset’) {
document.write(‘background-position:center 0px;’);
}else{
document.write(‘background-position:center top;’);
}
if(‘FFFFFF’!=””)document.write(‘background-color: #FFFFFF;’);
document.write(‘background-attachment: fixed;’);
if (accClickUrl != “”)document.write(‘cursor: pointer;’);
document.write(‘}’);
if (accClickUrl != “”)document.write(‘body > *{cursor: default;}’);
document.write(‘’);
if (accClickUrl != “”){
function OpenWin(page) {
if(accClickTarget==”_blank”)
window.open(page);
else
document.location=page;
}
accBgClickEvent=function(e){var
bglink=accClickUrl;EE=e?e:event;if(!EE)return;var
tg=EE.target?EE.target:EE.srcElement;if((!tg||tg.tagName!=”BODY”)&&tg.parentNode
.tagName!=”BODY”)return;var BackLink=OpenWin(“”+bglink);};
document.onclick= accBgClickEvent;
}
document.write(”);
document.write(”);

Reply

Christine July 16, 2015 at 11:54 am

Hi,

how can I use your script if I have instead of sky and leaderboard image only third-party tags for sky and leaderboard?

Reply

DFPHelp July 16, 2015 at 1:10 pm

Hi Christine,

I am not sure if I get your query correct here. Feel free to write us at support@dfphelp.in and we’ll try our best to help you.

Reply

Athanasios September 19, 2015 at 6:36 pm

Thanks for your work. I used your example and on the DFP page, I can see the creative on the preview, but on the site it doesn’t show up on the body of the page. Instead the style gets applied to an iframe which isn’t visible.

my site: techsmart[dot]gr

Reply

DFPHelp September 20, 2015 at 4:28 pm

Hi,

Your website is coded with Async GPT tags, which is the first problem. Secondly your website is not coded correctly for the ad unit definition. You can check view source on DFPHelp.in to see how I’ve coded my site.

If you can change your site to Sync GPT you’ll definitely get success with Wallpaper.

Cheers!

Reply

Athanasios September 21, 2015 at 12:42 pm

Can you guide me with some resources on how to implement something like that. What exactly needs changing? The Async GPT tags are for the normal banners probably. Do I have to change all tags?

Reply

Karuppuchamy December 11, 2015 at 9:21 am

Hi DFP Help,

Greetings for the day!

I’m really impressed the way you are guiding us on the DFP platform. First of all I like to say thanks for your work!

I have trafficked the wall paper line and put the Wallpaper Code Snippet as mentioned then placed click URL and image where advised. We can see the preview in DFP as well as website that is the good news.

Issues – Creative is not Clickable in website but in DFP preview environment it is clickable. Really difficult to find the issues, It would be great you could help us.

Used Wall paper code snippet for you reference.

var accClickUrl = “%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%”;
var accClickTarget = “_blank”;
document.write(”);
document.write(‘body {‘);
document.write(‘background-image: url(“%%VIEW_URL_UNESC%%%%FILE:JPG1%%”);’);
document.write(‘background-repeat: no-repeat;’);
if(‘top’==’top with offset’) {
document.write(‘background-position:center 0px;’);
}else{
document.write(‘background-position:center top;’);
}
if(‘FFFFFF’!=””)document.write(‘background-color: #FFFFFF;’);
document.write(‘background-attachment: fixed;’);
if (accClickUrl != “”)document.write(‘cursor: pointer;’);
document.write(‘}’);
if (accClickUrl != “”)document.write(‘body > *{cursor: default;}’);
document.write(”);
if (accClickUrl != “”){
function OpenWin(page) {
if(accClickTarget==”_blank”)
window.open(page);
else
document.location=page;
}
accBgClickEvent=function(e){var
bglink=accClickUrl;EE=e?e:event;if(!EE)return;var
tg=EE.target?EE.target:EE.srcElement;if((!tg||tg.tagName!=”BODY”)&&tg.parentNode
.tagName!=”BODY”)return;var BackLink=OpenWin(“”+bglink);};
document.onclick= accBgClickEvent;
}
document.write(”);
document.write(”);

Note:

We are getting the same result if we put var accClickUrl = “%%CLICK_URL_UNESC%%https://www.google.co.in/”;

Many thanks,
KC

Reply

DFPHelp December 11, 2015 at 9:29 am

Try using escaped click macro instead unescaped

Macro Escaping
%%CLICK_URL_ESC_ESC%% Double-escaped
%%CLICK_URL_UNESC%% Unescaped
%%CLICK_URL_ESC%% Escaped

Secondly, check with your webmaster for any conflicting code that is blocking the wallpaper to be clickable.

Reply

Bablu Chakma December 24, 2015 at 5:35 am

Simply incredible and awesome support. In a matter of hours, you have helped me very much to fix this issue which I’ve been having for many weeks. Thank you so much for taking the time to help me in this!

Reply
Nadeem December 28, 2015 at 9:39 am

Hi DFP Help,

its not working for me. Below are the test page

http://goo.gl/sLbRHK

http://goo.gl/XrLQM5

var accClickUrl = “%%CLICK_URL_UNESC%%CLICK URL GOES HERE“;

var accClickTarget = “_blank”;

document.write(‘’);

document.write(‘body {‘);

document.write(‘background-image: url(“%%VIEW_URL_UNESC%%%%FILE:JPG1%%”);’);

document.write(‘background-repeat: no-repeat;’);

if(‘top’==’top with offset’) {

document.write(‘background-position:center 0px;’);

}else{

document.write(‘background-position:center top;’);

}

if(‘FFFFFF’!=””)document.write(‘background-color: #FFFFFF;’);

document.write(‘background-attachment: fixed;’);

if (accClickUrl != “”)document.write(‘cursor: pointer;’);

document.write(‘}’);

if (accClickUrl != “”)document.write(‘body > *{cursor: default;}’);

document.write(‘’);

if (accClickUrl != “”){

function OpenWin(page) {

if(accClickTarget==”_blank”)

window.open(page);

else

document.location=page;

}

accBgClickEvent=function(e){var

bglink=accClickUrl;EE=e?e:event;if(!EE)return;var

tg=EE.target?EE.target:EE.srcElement;if((!tg||tg.tagName!=”BODY”)&&tg.parentNode

.tagName!=”BODY”)return;var BackLink=OpenWin(“”+bglink);};

document.onclick= accBgClickEvent;

}

document.write(”);

document.write(”);

Reply

DFPHelp December 28, 2015 at 4:44 pm

Hi Nadeem,

Are you using DFP Premium? Please share your line item setting as well.

Regards,
DFPHelp

Reply

Stranger XO January 17, 2016 at 10:27 am

Thank you very much for this. But this is applicable only in Sync GPT tag!
But i am using Async GPT tag in my site. So, could you please help me by giving a template or sample for wallpaper ads in Async GPT tag as because i am using Async GPT tags.
It would be great if you would kindly help me in this case.

Best Regards,
XO

Reply

DFPHelp January 19, 2016 at 6:29 am

Hi Stranger XO 🙂

Async is possible too, but needs you to work with your web developer and is not a straight forward solution. You’ll have to ask your developer to build a CSS for you and put the DFP code within that CSS per your size requirements. Post which you can target the ads to this ad unit and show the wallpaper.

What makes you chose Async over Sync tags though?

Reply

Stranger XO January 19, 2016 at 8:30 am

Thank you very much for the confirmation!

Reply

Tabrez March 10, 2016 at 11:56 am

Hi !
I am completely new to DFP & I am facing a very hard time in implementing this wallpaper ad on my website.
Can anyone help !

Reply

DFPHelp March 10, 2016 at 3:12 pm

Hi Tabrez,

Please share your test page URL via support@dfphelp.in

Reply

Tabrez March 11, 2016 at 7:45 am

Thanks for the prompt reply , I have mailed you the details from email trezescapital@gmail.com !
You are my only hope !
With Regards
Tabrez

Reply

zimnerd March 22, 2016 at 7:53 am

Hi DFPHelp

I have tried to implement your solution as below. Unfortunately it wont display the image, Please help incase i made a mistake.

var accClickUrl = “%%CLICK_URL_UNESC%%http://hypemagazine.com/“;
var accClickTarget = “_blank”;
document.write(‘’);
document.write(‘body {‘);
document.write(‘background-image: url(“%%VIEW_URL_UNESC%%http://www.hypemagazine.co.za/wp-content/uploads/2016/03/image.png-%%CLICK_URL_ESC%%“);’);
document.write(‘background-repeat: no-repeat;’);
if(‘top’==’top with offset’) {
document.write(‘background-position:center 0px;’);
}else{
document.write(‘background-position:center top;’);
}
if(‘FFFFFF’!=””)document.write(‘background-color: #FFFFFF;’);
document.write(‘background-attachment: fixed;’);
if (accClickUrl != “”)document.write(‘cursor: pointer;’);
document.write(‘}’);
if (accClickUrl != “”)document.write(‘body > *{cursor: default;}’);
document.write(‘’);
if (accClickUrl != “”){
function OpenWin(page) {
if(accClickTarget==”_blank”)
window.open(page);
else
document.location=page;
}
accBgClickEvent=function(e){var
bglink=accClickUrl;EE=e?e:event;if(!EE)return;var
tg=EE.target?EE.target:EE.srcElement;if((!tg||tg.tagName!=”BODY”)&&tg.parentNode
.tagName!=”BODY”)return;var BackLink=OpenWin(“”+bglink);};
document.onclick= accBgClickEvent;
}
document.write(”);
document.write(”);

Reply

DFPHelp March 28, 2016 at 8:48 pm

Please share the URL where this is implemented, also make sure your line item is active.

Reply

Dimitris June 1, 2016 at 1:10 pm

Hello everyone! I’ve done everything you have mentioned above but this is not working for me in my site. Can you please help me? It’s very important for me and my site this bg image to be clickable and countable.
Thanks in advance!
Cheers

Reply

DFPHelp June 1, 2016 at 6:08 pm

Please connect via Contact us form.

Note that for me to help you’ll have to grant access to your DFP. LMK.

Reply

Billy July 14, 2016 at 1:37 pm

Hello, can u help me to add this wallpaper ads in my wordpress Site? with pay. Thank you

Reply
cloud hosting August 24, 2019 at 11:13 am

Just want to say your article is as amazing. The clarity in your post is simply spectacular and i can assume you are an expert on this subject.
Fine with your permission let me to grab your RSS feed to keep updated with forthcoming post.
Thanks a million and please carry on the gratifying work.

Reply

DFPHelp November 18, 2019 at 5:48 pm

Sure, as far as it can backlink to original article.

Reply

david stanton November 18, 2019 at 5:44 pm

do you know how this can work in the latest google Ad manager, i tried you’re code but it doesn’t seem to work

Reply

DFPHelp November 18, 2019 at 5:48 pm

Hi David,

Sorry, this is an old post and there have been many changes in Ad Manager GPT code in the recent past. I suggest you refer http://climpmedia.com/creative-showcase/ for more help.

Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

About the Author

DFPHelp

Leave a Reply