HTML & Email Creatives

If you’re looking to extend beyond standard image banners, or you want to provide your publishers with email templates that they can send to their email list. This article shows you how to use these creative types, and some ways to enhance them.

The main difference between HTML and email creatives is that an unsubscribe link is added to the end of an email creative. Also, email creatives do not have set height and width parameters.

Adding a HTML & Email Creative

To add a HTML or email creative in HasOffers, go to Offers > Creative Files, then click Add Creative. Here, you can give the file a name, select either the “HTML” or “Email” creative type. If you select the HTML creative type, enter the dimensions of the ad.

You can upload creative assets like images or external stylesheets/page elements. Finally, paste in the creative code and insert the tracking link macros to their respective spots. Then insert your asset files where they need to go. Once you’re finished, click Add at the bottom of the page.

Note: For security purposes, the embed, object, and script HTML tags are not displayed or rendered in the HasOffers application.

Adding the Tracking Link Macro

In HTML, Email, and Text link creatives, you are required to include a tracking link macro into the creative code. This is to ensure a session is created, and users who click on the creative are properly redirected.

The two tracking link macros you can use are {tracking_link} and {etracking_link}.

The {tracking_link} macro is used in an anchor tag, where the URL would go. Here is an example of a standard tracking link macro:

<a href="{tracking_link}">Click here</a>

When a publisher grabs the code from the offer page, the macro will be converted to a tracking link:

<a href="http://demo.go2cloud.org/aff_c?offer_id=1&aff_id=1">Click here</a>

The {etracking_link} macro encodes the URL so it can be inserted in other URLs, for example as a click redirect. If you want to pass any other values through the HTML ad code, here are more macros that can be added:

  • {affiliate_id} or {aff_id} – Affiliate ID
  • {offer_id} – Offer ID
  • {source} – Traffic source specified in the tracking link
  • {aff_sub}, {aff_sub2}, {aff_sub3}, {aff_sub4}, or {aff_sub5} – Affiliate sub IDs 1-5
  • {creative_id} or {file_id} – ID of the selected creative

Adding HTML File Assets

HTML & Email creatives often have multiple assets to style the creative, including background images, external stylesheets, etc. You are linking to these files by using the URLs of where they are hosted in the image tags to stylesheets of the creative. You have two options for adding images and other assets for your HTML & Email creatives:

  1. Host the files with HasOffers by uploading them to our CDN
  2. Host files on your own server

If you want to host the files with HasOffers, uploading them is very quick and easy. Towards the bottom of the upload page, find the Upload section:

Here, you can attach asset files by clicking Browse and selecting the files for this creative. Once the creative has been uploaded, a progress bar will appear that shows the progress of each asset. Once the upload for each file is complete, then you will see a field with the URL the asset has been added to the CDN with:

You want to copy and paste this URL in where the asset is called in the HTML creative. This process needs to be done for all asset files in the creative.

If you are hosting the files elsewhere, then use the URL where they are hosted. This is the same as the above setup, except the files are hosted outside HasOffers. They still work correctly in the creative itself regardless of where they are hosted.

Enhancements to HTML / Email Creatives

Have Creative Go to Specific Offer URL

First you will need to use an HTML type creative, this allows us to dynamically populate the tracking link for the affiliate as the destination link on click and to hardcode the URL ID onto the link that is populated.

To create this creative in HasOffers, go to Offers > Creative Files > Add Creative. Select “HTML” as your creative type. Upload all images you have for the creative and upload the HTML code. For HTML Ads, Email Creatives, and Text Links specify the code for the creative.

All tracking links should use {tracking_link} to dynamically include the affiliate tracking link in the creative. Use {etracking_link} to include an encoded affiliate tracking link. The code below uses the {tracking_link} macro so that when you are viewing an offer and generate creative code for the creative, {tracking_link} is replaced with something like:

http://demo.go2jump.org/aff_c?offer_id=1&aff_id=1&file_id=104

The file ID in the link is needed so that clicks can be tied to performance of the creative.

Now to specify the URL in the HTML itself, add &url_id=URL_ID after {tracking_link}. For example, if you wanted to specifically use URL ID 6:

{tracking_link}&url_id=6

This lets the tracking link to then be generated for an affiliate:

http://demo.go2cloud.org/aff_c?offer_id=1&aff_id=1&file_id=104&url_id=6

So now when the affiliate grabs the ad code for that creative, it will automatically direct to the specified URL ID.

If you don’t want to add a specific URL to the offer itself, you can append the &url= parameter along with the encoded URL using our deep links feature:

{tracking_link}&url=http%3A%2F%2Fexample.com

The above link turns into:

http://demo.go2cloud.org/aff_c?offer_id=1&aff_id=1&file_id=104&url=http%3A%2F%2Fexample.com

Finding the URL ID

To find a URL ID for an offer URL you have already added to an offer, first go to the offer’s page. Then in the Landing Pages panel, click Manage to go to your list of offer URLs with IDs.

Hosting Creative Files on Third-Party Servers

You can upload them as HTML ad type creatives with HTML code that links to your images externally. This way affiliates can still generate an ad tag with tracking link automatically placed. Or you can place the locations in the notes link to them externally but it won’t create an ad tag for affiliates. They must add the tracking link manually.

Note on Using Emojis

If you wish to use emojis in your HTML creatives, use the HTML unicodes for them. Do not paste the emojis directly, or your creative will be corrupted. For example, use &#x1F600; instead of 😀, or &#x1F4B0; instead of 💰.

For a list of emoji unicodes, see the list at unicode.org.

No Comments

Leave a reply