有料級！　プレイアブル広告を自分の手で作りたい方へ！【Kimichan編】

こんにちは、Kimichanです。

この記事にたどり着いたあなたは、「プレイアブル広告を作りたいけども資料は全然無いし、大手サービスは高かったり無料でも制限があったり、全然わからん！」といった方だと思います。

本記事では、今回はAppLovinでの広告作成方法を具体的にお伝えします。

初めに、本記事は以下のライブラリを使用させて頂いています。

GitHub

GitHub – ppgee/cocos-pnp: Cocos Playable Ads in Multi-Network(facebook, google, unity, tiktok etc.) Cocos Playable Ads in Multi-Network(facebook, google, unity, tiktok etc.) – ppgee/cocos-pnp

１．プロジェクトの準備

Cocosのアカウント登録、及びCocos Creatorをインストールします、バージョンは3.8.0以上の物を選択してください。

インストールしたら、今回はサンプルとしてEmpty(2D)テンプレートを使用しプロジェクトを作成しましょう。

開くと一つもシーンが存在しないので、まずはCtrl+Sで保存します。

2．プラグイン導入

動作を確認後、上述のURLからプラグインをダウンロードしextensionsフォルダをプロジェクト内に作成して入れてください。

ツールバーからExtensionManagerを開き、プラグインがインストール出来たことを確認してください、見つからない場合は更新ボタンを押してみてください。

その後ライブラリに記載された例に倣い、Json形式の.adapterrrcファイルを同じディレクトリに作成し、ネットワークに以下を追加してください。

出力先の変更

  "exportChannels": ["AppLovin"],

AppLovin

   "AppLovin": {
      "body": "<script>if(mraid.getState()==='loading'){mraid.addEventListener('ready',onSdkReady)}else{onSdkReady()}function viewableChangeHandler(viewable){if(viewable){}else{}}function onSdkReady(){mraid.addEventListener('viewableChange',viewableChangeHandler);if(mraid.isViewable()){}}var url='AppleのストアURL';var android='AndroidのストアURL';var ua = navigator.userAgent;if(/android/i.test(ua)){url=android}function clickedCTA(){mraid.open(url)}</script>",
      "sdkScript": "<script src=\\"./mraid.js\\"></script>"
    }

3．CTAボタンの配置

プレイアブル広告で必要なCTA（Call to Action）ボタンをゲーム内で配置します、今回はサンプル右下設定ボタンを仮のCTAボタンとし、実装を行います。

以下のプログラムを作成します。

import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('PlayableEvents')
export class PlayableEvents extends Component {
    onPushCTA(){
        if(window.clickedCTA){
            window.clickedCTA();
        }
    }
}

Unityと同じ要領でCanvas上にボタンを配置し、onPushCTAをクリック時に呼び出すようにします。