#AdOpsQ&A: How to Use HTML5 as Creatives in DFP Small Business

DoubleClick For Publishers / Google Ad Manager Ad Optimization
Last updated: November 24, 2020 | by Kean Graham

This post was most recently updated on November 24th, 2020

We’re doing a series of Q&A based on frequently asked publisher questions, and trending forum topics. Send us your questions, and we’ll do our best to answer and feature them here. Don’t forget to subscribe to the MonetizeMore Blog if you haven’t yet.

Question

How do I traffic HTML5 as a creative in DFP for Small Business? Is it possible to traffic it as a primary creative?

Related Read: Google Now Converts Flash Ads into HTML5 on Mobile

#AdOpsQ&A: How to Use HTML5 as Creatives in DFP Small Business MonitizeMore

Answer

With existing workarounds, it is possible to do this. Trafficking HTML5 creatives in DFP without DoubleClick Studio can be a challenge for some, but it’s a challenge worth embracing ever since the recent death of Adobe Flash for creatives. Even the IAB made changes to accommodate the future of ad animation brought about by HTML5.

Google Web Designer (GWD) is a popular tool for making HTML5 creatives. It also seamlessly works with DoubleClick Studio when publishing to DFP. But what if you do not have DoubleClick Studio yet? The path from GWD to DFP is not yet outlined and there are still no HTML5 specification requirements to address the gap. But there are workarounds available.

The step-by-step solution below works not just for Google ad types, but for House ad types too. This makes it one of the most robust workarounds to use.

Step 1: Build your HTML5 creative from Google Web Designer using existing templates or from scratch.

#AdOpsQ&A: How to Use HTML5 as Creatives in DFP Small Business MonitizeMore

Step 2: Determine your publishing options.

#AdOpsQ&A: How to Use HTML5 as Creatives in DFP Small Business MonitizeMore

For this tutorial, we will use local publishing option.

#AdOpsQ&A: How to Use HTML5 as Creatives in DFP Small Business MonitizeMore

Step 3: Publish your creative locally. Inspect the contents of the resulting zip file.  You’ll need to dissect them in the succeeding steps.

#AdOpsQ&A: How to Use HTML5 as Creatives in DFP Small Business MonitizeMoreStep 4: Except for index.html and SVG files, assign names for each of the files for later use.

For this example, here are the names we decided to use.

location.png —> html5_testcreative_asset1

marker_sprite.png —> html5_testcreative_asset2

MonetizeMore-Google-AdSense-Certified-Partner.png —> html5_testcreative_asset3

You can name it in any way that you want but a systematized numbering system is used such as the one above.

Consequently, the index.html which provides structure for all these assets will be named as html5_testcreative_main or simply html5_testcreative.

For all the SVG files (there are 2 in this example), you need to find a way to host them live elsewhere and just take note of the URL for the succeeding steps.

Step 5: Upload the assets first as individual creatives using the display names from step 4. For this example, you will have five pre-loaded creatives.

#AdOpsQ&A: How to Use HTML5 as Creatives in DFP Small Business MonitizeMore

Step 6: Open index.html in a text editor and edit it with appropriate file server macros in DFP. This will transfer the code to the real location of the uploaded creatives from step 5.

The syntax is %%FILE:file_display_name%% for all files except the svg ones.

For this example, the replacements to index.html will be:

Live hosting URL from step 4 for img.svg (example: yourwebsite.com/img.svg)

%%FILE:html5_testcreative_asset1%% for location.png

Live hosting URL from step 4 for logo.svg (example: yourwebsite.com/logo.svg)

%%FILE:html5_testcreative_asset3%% for marker_sprite.png

%%FILE:html5_testcreative_asset4%% for MonetizeMore-Google-AdSense-Certified-Partner.png

#AdOpsQ&A: How to Use HTML5 as Creatives in DFP Small Business MonitizeMore

Step 7: Upload the edited index.html as a third party creative in the usual way.

#AdOpsQ&A: How to Use HTML5 as Creatives in DFP Small Business MonitizeMore

Double check if you were able to properly edit all the macros from step 6 where they belong.

#AdOpsQ&A: How to Use HTML5 as Creatives in DFP Small Business MonitizeMore

Step 8: Use the creative as you see fit.

Trafficking to DFP via an iframe

Another workaround was provided in the forums section of DoubleClick for Publishers recently which involves trafficking to DFP through an iframe and hosting the entire HTML5 zip file outside of DFP. Check out the thread for more details.

MonetizeMore is Google Certified Publisher Partner and can help you take your ad revenue to the next level. Sign up to get started today!


Related Reads:

Recommended Reading

Ad Optimization
December 4, 2024

3 Key Updates you missed on Private Auctions & Preferred Deals

Read More
google-faces-lawsuit-from-canada-over-rigged-auctions-ad
Ad Optimization
December 2, 2024

Google’s Ad Tech Practices: Anticompetitive or Just Business? Canada Sues

Read More
monetizemore-black-friday-offer
Blog
November 28, 2024

Maximize Your Gaming Ad Revenue This Black Friday & Cyber Monday with Traffic Cop

Read More

Trusted by 1,500+ publishers worldwide

10X your ad revenue with our award-winning solutions.

Let's Talk

Close

Ready to 10X your ad revenue with the #1 ad management partner?

Start Now