JavaScript

Information about JavaScript creatives

JavaScript Creatives (HTML5)
JavaScript Creatives (HTML5) Requirements
JavaScript Creatives (HTML5) Validation

JavaScript Creatives (HTML5)

HTML5 - a banner type of creatives, that created using JavaScript, HTML, and CSS. They can include images, animations, videos, or any combination of these elements. The creatives can support a variety of engagements: taps, shakes, clicks, etc.

HTML5 (js) creative requirements:

Creative must be full SSL compliant (all requests from https). The landing page also https
HTML file must be called as index.html
HTML5 creative must have ClickTag macros, one of {CLICK_URL}, {CLICK_URL_ENC}, {CLICK_URL_ASYNC}. Click tag has to be inserted in the main RM creative file (if it's HTML5 - index.html file; if it's a JavaScript tag - main JS tag).
All creatives must open the landing page (click URL) in a new tab/window. The target window for the click-through URL must be set to "_blank" so the click-through will open in a new window. Do not leave the target statement undeclared.
Ads must remain static after 30 seconds.
Creatives may not exceed a 150K initial load. The total download cannot exceed 5MB.
HTML5 creative code has to be valid and pass validator - https://validator.w3.org. Also no errors in the browser console.

For Google Web Designer or GWD requirements. Please read this article: Google Web Designer banner creation.

HTML5 (js) creative uploading process:

Step 1: Log in to your DSP account, go to Creative Sets

Step 2: On the new page click "Add creative set"

Step 3: On the next page indicate the creative sets Title and select the Banner format.

Step 4: Then select Javascript tag format and click "Continue".

Step 5: You will see 2 ways to upload the creatives.

Direct JS tag upload - For this method you just need to enter the size of the creative and PASTE the JS code in the code block.
Click on Mass File Upload (used for single creative uploads as well) -> click on Choose File -> select creatives you want to upload. The creatives size will be detected automatically if it's visible in the index.html file.

JavaScript Creatives (HTML5) Requirements

Creative must be full SSL compliant (all requests from https). The landing page also https.
RM creative main index.html file has to have a campaign landing page URL (click URL):
RM creative must have ClickTag macros, one of {CLICK_URL}, {CLICK_URL_ENC}, {CLICK_URL_ASYNC}.
Click tag has to be inserted in the main RM creative file (if it's HTML5 - index.html file; if it's a JavaScript tag - main JS tag).
Recommended RM banner sizes: 300x250px and 320x480px.
All creatives must open the landing page (click URL) in a new tab/window. The target window for the click-through URL must be set to "_blank" so the click-through will open in a new window. Do not leave the target statement undeclared.
Ads must remain static after 30 seconds.
Creatives may not exceed a 150Kb initial load. The total download cannot exceed 5MB.
Rich Media creative code has to be valid and pass validator - https://validator.w3.org. Also no errors in the browser console.
For Google Web Designer or GWD requirements. Please read this article: Google Web Designer banner creation.

Notes:

JavaScript (JS) creatives supported only if created with: Google tools (GWD, GCM, etc.) and Sizmek.
We are using our own DSP/RTB platform to serve ads. We don't use any third-party ad server (i.e. DFP).
Tags must be sent on a plain text file. No copy-paste from email, spreadsheet files, etc.

Alcohol creatives:
All creatives related to alcohol has to have:

- Text: DRINK RESPONSIBLY

- This icon set:

Text and icons size should be adapted by creative size, but it should be visible and readable without zoom.

JavaScript Creatives (HTML5) Validation

What is creative validation?

Creative validation is a process where the system cleans up the creative code or/and provides errors which should be fixed. Creative validation is crucial for a successful digital advertising campaign. Nobody wants to run broken, unclickable ads, right? This is why at Eskimi, we create a system which automatically validates creative quality.

The primary benefits of creative validation and clean-up are:

1. Saving time of the advertisers as the creative code is cleaned from irrelevant lines.

2. Faster troubleshooting as the system provides errors instantly which needs to be fixed.

Creative code cleanup

There are three ways how HTML creatives can be added to Eskimi dashboard:

1. Uploaded as .zip file;

2. Pasted into the JavaScript tag area;

3. Writen manually into the JavaScript tag area;

When the HTML is uploaded/pasted the system automatically (do additional steps are required) will clean up the creative code from irrelevant lines. The clean-up happens for:

1. System deletes comments that contain “http:” or “https:” substring.
2. System deletes empty lines if there are more than one empty line.
3. System deletes html codes %0D%0 (end of line).

Fixing broken creatives

Naturally we don't want to serve broken creatives. To avoid broken creatives to see the day light the system updates the creative code automatically and fixes possible errors. There are few distics changes that the system does:

1. If you upload code from .zip or paste something into editor, the system will change the “a” tag to <a href="javascript:window.open(window.clickTag = '{click_url}')"> without breaking canvas.

2. If you upload code from zip or paste something into editor, the system will add <a href="{CLICK_URL}" target="_blank"> only once.

Error bars

Error bars a great way to troubleshoot the problems faster. There are few ways how Eskimi indicates errors. Here are the main error indication types that allow advertisers to foxus on their creative fixes faster:

1. Backend errors - these are errors that are crucial and won't allow to save the creative. These errors are marked in red.

2. Frontend errors - indicates where the issue appeared. These errors appear instantly when the creative is uploaded/pasted. If the creative was created in the UI then the errors will appear when the advertiser will click save. These errors are marked in yellow. These errors will be visible even when creative is saved and during further revision until the errors are fixed.

3. Errors in the tag indicate specific issue that needs to be fixed. It is a continuation of previously mentioned yellow error bars. These errors appear automatically and instantly when the creative is uploaded or pasted.

In conclusion

Eskimi provides valuable information for non-technical people how the creatives should be fixed. The only steps are to reach out to your technical team so they would help you fix the errors. Eskimi strongly recommends to fix all the mention errors to reach the maximum quality during digital advertising.