メインコンテンツまでスキップ

Snapchatプレイアブル広告

PlayCanvasは、公式の外部ツールを通じて、Snapchat Playable Adフォーマットと要件をサポートしています。

SnapchatのPlayable Adでは、MRAID 2.0 API標準が使用され、広告用のアセットはindex.htmlに埋め込むのではなく、外部に置く必要があります。

外部アセットは、唯一の名前が付けられたフォルダに置かれる必要があります(このツールが対応しているため)。このため、SnapchatのCDNサーバーにアップロードされます。

このツールにはGitHubのドキュメントにあるいくつかの制限があるため、注意してください。

サンプルプロジェクト​

Cube Jumpプロジェクトは、Snapchat Playable Adフォーマットにエクスポートできる状態になっており、期待されるHTML出力はこちらからダウンロードできます。

ファイルサイズの補足​

5MB(未圧縮)までのソフトリミットがあるため、広告用のアセットの使用を計画し、予算編成する必要があります。

圧縮されていない最小化されたPlayCanvas Engineのコードは、 ~1.2MB であり、アセットファイルをBase64文字列にエンコードする必要があるため、各アセットファイルのサイズに対して約 ~30% 追加されます。

これは、Base64エンコード前にアセットに約~3MBの余裕があることを意味します。

画像をできるだけ小さく保ち、TinyPNGのようなツールを使用してさらにファイルサイズを縮小するようにしましょう。

Playable Ad のチェックリスト​

Snapchatの広告ネットワークは、ユーザーに提供するときに独自のトラッキングバージョンに置き換えることができるindex.html内のコールトゥアクション関数が必要です。URLはSnapchat Ad campaignツールで設定されます。

このツールは、グローバル関数snapchatCta();でこのロジックをラップし、playable adプロジェクトで呼び出す必要があります。

  • コールトゥアクションのコールバックにsnapchatCta();という関数を呼び出しましたか?

エクスポートの方法​

GitHubリポジトリのREADMEにあるセットアップ手順に従ってください。

ドライランテスト​

Snapchatにはまだ公式のテストツールがありませんので、Snapchat広告ネットワークが期待する形式にエクスポートする前に、まずドライランテストを行う必要があります。

config.jsonの以下のオプションを設定すると、ZIPファイルが生成されます。ZIPファイルには、index.htmlからアセットデータとPlayCanvas Engineコードが別々のファイルとして含まれます。

    "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
    }

folder_nameはユニークな文字列でなければなりません。この目的のため、GUIDジェネレータからランダムなGUIDを使用するか、Snapchatの代表者から使用する必要がある特定の文字列を受け取る必要があります。

そして、以下のコマンドを実行します。

npm run one-page

詳細なオプションとコマンドの詳細は、'プロジェクトを単一のHTMLファイルに変換する'のReadmeセクションで確認できます。

デバイス上で広告をテストするには、AndroidアプリCreative Previewを使用しますが、広告をhttpsサーバーにホストする必要があります。

私たちのお勧めの方法は、ローカルホストをホストし、アプリがアクセスできるようにngrokを使用することです。

これが設定されたら、Creative Previewアプリを開き、以下の設定で新しい「Display」広告を作成します。

Snapchatへのエクスポート​

広告をSnapchatにアップロードする準備ができたら、index.html内のアセット参照に、SnapchatのCDN URLプレフィックスを追加する必要があります。これはconfig.jsonのオプションを通じて、external_url_prefixプロパティを使用して行うことができます。

    "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
    }

その後、ZIPファイルをSnapchatの代表に渡して、広告ネットワークにアップロードすることができます。