Building for Vungle: Creative Requirements

1. ad.html

Ensure your main HTML file is named ad.html (avoid using index.html).

2. complete Event

Always send a complete event in your ad experience.

The complete event is used to define when the primary experience of the ad has been completed (for example, with a playable ad, the final screen displaying the CTA and logo would be a suitable moment to trigger the complete event).

If your creative does not have a clear state where the creative has completed/ended, you can use the complete event after the user has made 5 or more interactions. Ensure you explicitly call complete and not download in this case.

3. Error free code

Ensure your code is error-free and semantically correct.

There should be no errors reported in the console and your ad.html should pass markup validation (use a validator such as W3C, or lint when developing locally).

4. Orientation-compatible

Check to make sure your creative is compatible in both portrait and landscape orientations.

Use aspect ratio breakpoints to dynamically change the creative experience, so users experience a premium creative irrespective of whether their device is in portrait or landscape.

5. Visible call-to-action

Your creative should always contain a CTA, which can be interacted upon, and is visible throughout the ad experience.

6. Full-screen clickable end screen

Your creative can only provide full-screen clickable element, ensure it can only be actioned at the end of the creative experience.

For example, only use a full-screen clickable element on the end screen, once the primary experience of the ad has been completed. This is the only place you can call the download event when not attached to a CTA element.

7. START_MUTED token

If your creative uses audio or video elements, ensure the audio can be muted/unmuted remotely by including the START_MUTED token.

8. Pausing/resuming content

Use the pause and resume events to toggle audio and video (if used in your creative).

If the user were to pause the ad, any audio/video elements in the creative should also pause, and only resume once the user resumes the ad experience.

9. <5mb file size

Ensure all assets are compressed, and the total file size of the ad should not exceed 5MB.

10. Android on load

When experiencing rendering issues on Android devices (like black screens), please make sure to update the event listener when loading the unit.

Replace the following:

window.addEventListener("load", (event) => {}); 

To this:

window.addEventListener('DOMContentLoaded', (event) => {});

10. download Event

Do not use the download event without user interaction.

Please follow the instructions on how to implement ASOI to ensure your download event does not cause issues with publisher tokens.

11. Nested directory structure

Do not use nested directories.

All files (e.g CSS, JS and other assets) must be kept at the same level as ad.html.

12. vw and vh units

Avoid using vw and vh units in the CSS.

Some devices/platforms render this unit differently and can cause issues with your creative.

13. document.location.reload

Never use document.location.reload.

A creative should never have to reload the entire document. If an element needs to be reloaded, use a more suitable javascript method.

14. Custom close button

Never use a close button in your creative.

Adaptive Creative automatically generates a close button to control the ad experience. Avoid using additional close iconography, as it can confuse the user.

15. External assets

Do not use assets which are hosted externally. All assets must be referenced locally within the creative.

A user may not be connected to the Internet at the moment they are viewing the ad, and so any externally sourced assets may fail to load.

Some assets may throw CORS (cross-origin) errors. Consider using base64 if necessary.

16. Ad tracking links

Do not use ad tracking links or any external tracking libraries.

17. mraid.js references

Do not include a reference to mraid.js.

Adaptive Creative already uses MRAID, and calling it from the creative may interfere with the ad experience.

18. Platform-specific APIs or experimental features

Avoid using platform-specific properties or experimental features.

Your creative may be served across all Vungle SDK platforms (iOS, Android, Windows, Amazon) so ensure cross-compatibility when building your creative.