This article walks you through creating a responsive ad unit from a non-responsive advertiser-provided ad tag.
PLEASE READ HTML COMPONENT ARTICLE FIRST HERE (CODE SNIPPET EDITOR ADDED/MAY NOT NEED TO FOLLOW BELOW INSTRUCTIONS)
- Copy the iFrame tag in its entirety from the trafficking worksheet provided by the client. (If the tag is in an Excel file – be sure to doubleclick into the actual cell and copy the tag):|
- Open the Notepad or Text Edit application and create a new file. Name it index.html and paste the ad tag code into the file. (Note: if using Text Edit, make sure under Text Edit preferences you have "Plain Text" selected, not Rich text).
The Html file must serve over https not http. Our preview is over https. The browser blocks non secure files when the page is served over https. If the html file is incorrect, add the 's' after any instance of "http" in the file.
* Make sure there are no spaces or special characters in the html and zip naming conventions (no #, $, etc.) as this may cause an error in uploading.
If you get the following warning when saving, select Use .html
- Right-click and compress/zip the file, it should now be called index.zip.
- Open the builder under the appropriate advertiser, and create a new Banner ad sized to the dimensions of the advertiser-provided ad/tag. Note: If your backup image is embedded in the advertiser tag, you will not need to set one in Adventive.
- A blank canvas will load. Check the Responsive Screen option under General in the properties menu on the right. This will enable responsive scaling, allowing the ad unit to dynamically scale depending on the user’s browser size.
- From the Components menu (under Tools on the left) select HTML5 Import. This will add a placeholder frame to your ad canvas.
- With the placeholder selected, you’ll see options for HTML5 Import in the Properties panel on the right. Click Upload ZIP File and upload the index.zip file you created.
- The creative will now be displayed in the placeholder/frame. You can resize the HTML5 frame to the dimensions of your ad unit.
- Clickthrough data is already embedded in the tag, but if you want to also track clicks in Adventive, you'll need to add a Hitbox (In the left side Tools section) over the entire unit and enter a default clickthrough URL under General properties (or you can add the default url/clicktracker from the campaign manager). *You will not need to extract the impression tracker from the html file and add under 3rd party tracking as it will already be embedded in the tag, and to avoid counting twice).
- Save the ad and you’re good to go. To test responsiveness, preview the unit and resize your browser window.