HTML5 フローティング作成ガイド

タイマーを追加する

タイマーを使用すると、ユーザーがゲームに費やした時間などクリエイティブで発生した操作の時間を計測できます。

タイマーを使用するときは、どの操作でタイマーを停止するかを検討する必要があります。たとえば、ユーザーがゲームをプレイする時間を計る場合、閉じるボタンか exit がクリックされたら、タイマーを停止します。ゲームプレイを停止する、あるいはプレイ中のウィンドウから移動するたびに、必ずタイマーを停止してください。

Google Web Designer でタイマーを追加する

  1. [イベント] パネルに移動し、プラスボタン([+])をクリックしてオブジェクトにイベントを割り当てます。
  2. イベント ポップアップ ウィンドウで、オブジェクトのインスタンスをソースとして選択します。
  3. [タップ領域] > [タップ / クリック] の順に選択します。
  4. 引き続きイベント ポップアップで [操作] パネルに移動し、[Google 広告]、[タイマーを開始] の順にクリックします。
  5. [レシーバー] パネルに移動して [gwd-ad] をクリックします。
  6. [設定] パネルに移動し、トラッキングの目的に合った指標 ID を入力します。ここで入力した ID は、タイマーを停止する際に再度必要となりますので忘れないようにしてください。
  7. 同様の手順でタイマーを停止します。指標 ID は、前の手順と同じものを使用してください。
  8. [Save] をクリックします。トラッキング コードは、指定した内容に基づいて自動的に追加されますので、後でソースコードを編集する必要はありません。
  9. お使いのブラウザで広告をプレビューします。
  10. 広告をスタジオに公開します。

任意の HTML エディタを使用してタイマーを追加する

  1. <div> タグを使用して、クリエイティブにボタン要素を 2 つ作成します。HTML ファイルに要素を作成し、CSS ファイルでスタイルを設定します。次に、start-timerstop-timer にそれぞれ異なる ID を割り当てます。

    HTML ファイルの <div> タグ オブジェクトの例:

    <div id="start-timer">タイマーを開始する</div>
    <div id="stop-timer">タイマーを停止する</div>

    CSS ファイルのスタイル設定と ID セレクタの例:

    #start-timer {
        position: absolute;
        width: 130px;
        height: 20px;
        top: 60px;
        left: 25px;
        cursor: pointer;
    }
    
    #stop-timer {
        position: absolute;
        width: 130px;
        height: 20px;
        top: 85px;
        left: 25px;
        cursor: pointer;
    }
  2. 次の JavaScript メソッドを使用してタイマーを開始します。Enabler.startTimer(timerId:String);
  3. 次の JavaScript メソッドを使用してタイマーを停止します。Enabler.stopTimer(timerId:String);
    • timerId はレポートに表示されるタイマーの名前です。記録するアクションに関連付けやすいようなタイマー名を使用します。このタイマーの名前は、クリエイティブをスタジオにアップロードするか、キャンペーン マネージャー 360 でクリエイティブを入稿する際に変更できます。
    • タイマーを停止するには、stopTimer で使用される timerId が、startTimer で使用される ID と一致する必要があります。ID は大文字と小文字が区別されるため、必ず正確な文字列を使用してください。
    • これらの方法を使用するには、イネーブラー ライブラリを追加して初期化する必要があります。

コード スニペット

function startTimerHandler(e) {
    Enabler.startTimer('My Timer');
}
document.getElementById('start-timer').addEventListener('click',
startTimerHandler, false);

function stopTimerHandler(e) {
    Enabler.stopTimer('My Timer');
}
document.getElementById('stop-timer').addEventListener('click',
stopTimerHandler, false);
 
この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。

さらにサポートが必要な場合

問題を迅速に解決できるよう、ログインして追加のサポート オプションをご利用ください。