Dos and Don'ts of Adaptive Creative

1. ad.html

Ensure your main HTML file is named ad.html or 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.

1. 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.

2. Direct calls to App Stores

Do not call directly to AppStore / Play Store from your asset (ad.html)

Please use "complete" / "download" events instead. For more information please refer to the following instructions on how to customize your experience.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. Ad tracking links

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

9. 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.

10. Platform-specific APIs or experimental features

Avoid using platform-specific properties or experimental features.

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

11. Load Event

Avoid relying on the load event to initialise your ad.

If some resources fail to load, it may prevent the web-view from triggering the load event.

12. Adaptive paths

Avoid using adaptive paths // as prefixes for your resources.

This approach may cause resource requests to be directed locally.