PlayCanvasのゲームをFacebookのプレイアブル広告に対応させる

PlayCanvasで作成したプロジェクトを「プレイアブル広告」に出稿する方法を紹介します。

プレイアブル広告とは?

プレイアブル広告とは、ゲームやアプリの小さなインタラクティブなプレビューで、ダウンロード前にユーザーがそのゲームやアプリを体験できるようにするためのものです。通常、Facebookのプレイアブル広告はニュースフィードに表示されるか、ゲーム内/アプリ内のリワードと引き換えに他のゲームやアプリの「リワード広告」と共に表示されます。

詳細についてはこちらの記事をご覧ください

• PlayCanvasでFacebookプレイアブル広告を作成できるようになりました！

PlayCanvasのプロジェクトをFacebookのプレイアブル広告に対応させる方法を紹介します。

 

事前準備

プレイアブル広告に対応させるためには下記の制約があります。

• プレイアブルアセットはHTML5形式です。
• ファイルサイズが2MB制限内です。
• Javascriptのリダイレクトはありません。
• No viruses found.
• FbPlayableAd.onCTAClick()の実装が必要です。

アプリへの遷移を行うためのゲーム内にFbPlayableAd.onCTAClick() を関数を実行するタイミングをスクリプトから設定する必要があります。制約の詳細はこちらをご覧ください。

プレイアブル広告の仕様

 

ツールでプロジェクトをプレイアブル広告に対応させる

いくつかの仕様を自動で対応させるためのツールとして「playcanvas-rest-api-tools」が公開されています。このツールを使用してプロジェクトの準備をします。

また、利用のためには事前に下記のソフトウェアをインストールする必要があります。

• git
• npm

1. ツールのダウンロード

git clone git@github.com:playcanvas/playcanvas-rest-api-tools.git
cd playcanvas-rest-api-tools
npm install

 

2. .envの編集

playcanvas-rest-api-toolsのファイル内にある、.env.templateのファイル名と中身を変更します

AUTH_TOKENはこちらから取得できます。

変更前 .env.template
AUTH_TOKEN=abcd

変更後 .env
AUTH_TOKEN=コピーしたAUTH_TOKEN

3. config.jsonの編集

config.template.jsonのファイル名と中身を変更します

• プロジェクトID
• シーンID
• ブランチID
• patch_xhr_out: true
• inline_game_scripts: true

に変更します。

{
    "playcanvas": {
        "project_id": プロジェクトID,
        "name": "Project name",
        "scenes" : [シーンID],
        "branch_id": "ブランチID",
        "description": "",
        "preload_bundle": false,
        "version": "",
        "release_notes": "",
        "scripts_concatenate": true,
        "scripts_sourcemaps": false,
        "scripts_minify": true,
        "optimize_scene_format": false
    },
    "csp": {
        "style-src": [
            "'self'",
            "'unsafe-inline'"
        ],
        "connect-src": [
            "'self'",
            "blob:",
            "data:",
            "<https://www.google-analytics.com>"
        ]
    },
    "one_page": {
        "patch_xhr_out": true,
        "inline_game_scripts": true,
        "extern_files": {
            "enabled": false,
            "folder_name": "",
            "external_url_prefix": ""
        },
        "mraid_support": false,
        "snapchat_cta": false,
        "compress_engine": false
    }
}

4. プロジェクトのダウンロード

設定が完了したら、ページのダウンロードをします。

npm run one-page

 

5. ファイルの確認

./temp/out/プロジェクト名.html

にプロジェクトが保存されています。このファイルがプレイアブル広告向けに設定がされているプロジェクトファイルです。

 

6. ファイルのチェック

ダウンロードされたプロジェクトをこのページにアップロードをし、

問題がない場合、Facebookの「PlayAble Ads」として掲載することができます。