JavaScript

Information about JavaScript creatives

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:

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 SetsScreenRecording2024-05-06at16.09.12-ezgif.com-optimize (1).gif

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. 

ScreenRecording2024-05-06at16.17.03-ezgif.com-optimize.gif

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

ScreenRecording2024-05-06at16.19.28-ezgif.com-optimize.gif

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

  1. 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.Screenshot2024-05-06at16.31.24-ezgif.com-optipng-min.png
  2. 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.

Screenshot 2024-05-06 at 16.38.34.png

JavaScript Creatives (HTML5) Requirements


 Notes:

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

- Text: DRINK RESPONSIBLY

- This icon set: dontdrink2.png

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;

Screenshot 2022-03-15 at 17.28.13.png

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.

Screenshot 2022-03-15 at 17.41.18.png

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. 

Screenshot 2022-03-15 at 17.39.55.png

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. 

Screenshot 2022-03-15 at 17.49.14.png


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.