Skip to main content

Snapchat Playable Ad

PlayCanvas supports the Snapchat Playable Ad format and requirements via an official external tool on GitHub.

Snapchat playable ads uses the MRAID 2.0 API standard and requires the assets for the ad to be external from the index.html rather than embedded.

The external assets will need to be in a folder that is uniquely named (which the tool handles for you) so that they can be uploaded to Snapchat's CDN servers.

There are some limitations to be aware of with the tool which can be found in the documentation from GitHub.

Example project​

The Cube Jump project is ready to be exported to the Snapchat Playable Ad format and the expected HTML output can be found here.

File size tips​

As there is a soft limit of 5MB (uncompressed), you will have to plan and budget the usage of assets for the ad.

The minified PlayCanvas Engine code is ~1.2MB uncompressed and due to the need to encode the asset files into Base64 strings, it adds ~30% to the size of each asset file.

This means that you would have about ~3MB for assets before the Base64 encoding.

Try to keep images as small as possible in dimensions and use tools like TinyPNG to reduce file size even further.

Playable ad checklist​

The Snapchat ad network requires the call to action function to be in the index.html where the network can replace it with a unique tracking version when it is served to the user. The URL will be set in the Snapchat Ad campaign tool.

The tool wraps this logic in a global function: snapchatCta(); that should be called in the playable ad project.

  • Have you called the function snapchatCta(); as part of the call to action callback?

How to export​

Follow the setup steps from the readme in the GitHub repo.

Dry run test​

As Snapchat does not yet have an official tool to test with, we will have to do a dry run to test with first before exporting in a format that the Snapchat ad network expects.

Set the following options in the config.json as shown below. This will produce a ZIP file with the asset data and PlayCanvas Engine code as separate files from the index.html.

    "one_page": {
        "patch_xhr_out": false,
        "inline_game_scripts": true,
        "extern_files": {
            "enabled": true,
            "folder_name": "78fb9255-3033-4fe2-b9e1-355b149229a1",
            "external_url_prefix": ""
        },
        "mraid_support": true,
        "snapchat_cta": true
    }

The folder_name needs to be a unique string. For this purpose, you can use a random GUID from a GUID generator or your Snapchat representative may have a specific string that you should use.

And run the command:

npm run one-page

Full details of options and commands can be found in the readme section for 'Converting a project into a single HTML file'.

To test the ad on a device, we can use the Android app Creative Preview but we need to host the ad on a https server.

Our recommended approach is to host locally and use ngrok to create a https tunnel to your computer that the app can access.

Once this is setup, open Creative Preview app and create a new 'Display' ad with the following settings:

Export for Snapchat​

When the ad is ready to be uploaded for Snapchat, we need to add Snapchat's CDN URL prefix to the asset references in index.html. We can do this via the options in config.json via the external_url_prefix property:

    "one_page": {
        "patch_xhr_out": false,
        "inline_game_scripts": true,
        "extern_files": {
            "enabled": true,
            "folder_name": "78fb9255-3033-4fe2-b9e1-355b149229a1",
            "external_url_prefix": "https://rtb-ads.shadow.snapads.com/html5"
        },
        "mraid_support": true,
        "snapchat_cta": true
    }

The ZIP can then be given to your Snapchat representative to upload to the ad network.