Adobe Analytics

AdobeAnalytics:WordPressやHTML5内の動画を計測する

こんにちは、エクスチュアの鈴木です。

Adobe AnalyticsでWordPressやHTML5内の動画を計測する方法について紹介します。

Adobe Analyticsにおいての動画計測では、Milestone方式(旧式)とHeartBeat方式がありますが、
今回はDTMを用いて、Milestone方式での実装を行いました。

以下手順です。
1.AppMeasurement.js(s_code.js)へMedia Module,Integrate Moduleが実装されているかの確認。
2.動画を計測するにあたりどの変数やイベントを設定。
3.DTMで設定の変更と追加。
4.計測状況の確認。

1.AppMeasurement.js(s_code.js)へMedia Module,Integrate Moduleが実装されているかの確認。

まずは、DTM内で設定されているAppMeasurement.js(s_code.js)を確認します。

Media Module Integrate Moduleが実装されていない場合には、
ActivityMapの直前にMedia ModuleとIntegrate Moduleを記入します。
※各モジュールはAdobe Analytics内のコードマネージャーからダウンロードできます。

/************************** PLUGINS SECTION *************************/
/* You may insert any plugins you wish to use here. */

/* Media Module */
function AppMeasurement_Module_Media(q)・・・・・
/* Media Module end */

/* Integrate Module */
function AppMeasurement_Module_Integrate(l)・・・・・
/* Integrate Module end */

/* AM 1.7.0 */
function AppMeasurement_Module_ActivityMap(f)・・・・・
/* End ActivityMap Module */

============== DO NOT ALTER ANYTHING BELOW THIS LINE ! ===============

上記の様なイメージです。

2.動画を計測するにあたりどの変数やイベントを設定。

次に、動画計測において、どの変数を使うか、どのようなイベントを計測するのかを決めます。

今回は以下の様に変数,イベントを設定しました。

セグメントとは、動画の再生割合(今回では、25%や50%など)をポイントと設定したときのポイント間(「0%~25%」や「50%~75%」)を指します。eVarでどのポイントを再生したのか、イベントで回数を取得することにしました。
※ポイントが細かくなりすぎると、SC数が増えるので要注意。

変数やイベントが決定したら、先に、Adobe Analyticsの”ビデオレポート”を有効にしておきましょう。

3.DTMで設定の変更と追加。

最初に、DTM内のAppMeasurement.js(s_code.js)の設定を変更します。

Media ModuleとIntegrate Moduleが実装している状態で、
以下の様に、JSを追記しました。

/************************** PLUGINS SECTION *************************/
/* You may insert any plugins you wish to use here. */

/* Media Module */
function AppMeasurement_Module_Media(q)・・・・・
/* Media Module end */

/* Integrate Module */
function AppMeasurement_Module_Integrate(l)・・・・・
/* Integrate Module end */

s.loadModule("Media")
s.Media.trackVars = "events,prop14,eVar14,eVar15,eVar16";
s.Media.trackEvents = "event15,event16,event17,event18,event19,event20,event21,event22";
s.Media.autoTrack = false; //使用できないのでfalse
s.Media.segmentByMilestones = true; //セグメントの生成
s.Media.trackMilestones="25,50,75"; //セグメントの間隔
s.Media.trackUsingContextData = true; 
s.Media.contextDataMapping = { //データの格納先
    "a.media.name"       : "prop14,eVar14",
    "a.media.segment"    : "eVar15",
    "a.contentType"      : "eVar16",
    "a.media.timePlayed" : "event15",
    "a.media.view"       : "event16,event17",
    "a.media.segmentView": "event22",
    "a.media.milestones" : {
        25 : "event18",
        50 : "event19",
        75 : "event20"
    },
    "a.media.complete"   : "event21"
};

/* AM 1.7.0 */
function AppMeasurement_Module_ActivityMap(f)・・・・・
/* End ActivityMap Module */

============== DO NOT ALTER ANYTHING BELOW THIS LINE ! ===============

Media Moduleを読み込んだ後に、JSを実行させたい為、
Integrate Module 配下に記載します。

DTM上でイベントを設定致します。

次に、DTMの「ルール・複数」より、「ページ読み込みルール」を作成します。

ルール内に、スクリプトを追加します。
タイプを「非順次JavaScript」で、以下のJSを記載しました。

var tmp_video = s.getQueryParam("p"); //ここは、URL内のパラメータ(p=~~~)を取得
if (tmp_video) {
    var video = document.getElementById("video-" + tmp_video + "-1");
    var mediaName = tmp_video;
    if (video) {
        video.addEventListener('play',   videoHandler,false); //動画再生時の処理
        video.addEventListener('seeked', videoHandler,false); //再生位置移動の完了時の処理
        video.addEventListener('seeking',videoHandler,false); //再生位置移動の完了時の処理
        video.addEventListener('pause',  videoHandler,false); //一時停止時の処理
        video.addEventListener('ended',  videoHandler,false); //再生完了時の処理

        function videoHandler(e){

            var mediaPlayerName = "mp4";
	        var mediaLength = video.duration;
	        var mediaOffset = video.currentTime > 0 ? Math.floor(video.currentTime):0;
	        
	        if (e.type == "play"){
	            if (mediaOffset == 0){
		            s.Media.open(mediaName, mediaLength, mediaPlayerName);
		            s.Media.play(mediaName, mediaOffset);
	            } else{
		            s.Media.play(mediaName, mediaOffset);
	            }
	        } 

	        if(e.type == "seeked"){
	            s.Media.play(mediaName, mediaOffset);
	        }
	        
	        if(e.type == "seeking"){
	            s.Media.stop(mediaName, mediaOffset);
	        }

	        if(e.type == "pause"){
	            s.Media.stop(mediaName, mediaOffset);
	        }

	        if(e.type == "ended"){
	            s.Media.stop(mediaName, mediaOffset);
	            s.Media.close(mediaName);     
	            mediaOffset = 0;
	        }
        };
    }
}

HTML5やWordPressでは、autoTrackが使用できない為、再生や停止などのイベントを手動で設定する必要があります。

上記で使用しているJSについては、こちらからご確認ください。

4.計測確認を行う。

動画を再生開始してからデータが計測されているか確認します。

確認方法としては、
・動画再生後に、Adobe Debuggerを起動して確認。
・ブラウザの”ネットワーク”よりAdobe Analyticsのイメージリクエストを確認。
・charlesで確認。
などの方法でイベントの発生や変数に値が入っているか確認できます。

例)ブラウザの”ネットワーク”よりAdobe Analyticsのイメージリクエストを確認。

実際にAdobe Analyticsビデオレポートにも、反映されておりました。

今回は、AdobeAnalyticsでWordPressやHTML5内の動画を計測する方法を紹介しました。
弊社では、Adobe AnalayticsやGoogle Analyticsでの動画計測の実装支援なども行っております。

お問合せはこちらから

ブログへの記事リクエストはこちらまで

ピックアップ記事

  1. 最速で理解したい人のためのIT用語集

関連記事

  1. Adobe Analytics

    Adobe AnaltyicsとGoogle Analytics の「生Webビーコン」をBigQu…

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

  2. Adobe Analytics

    検索エンジン-自然とは-Adobe Analyticsの指標説明

    こんにちは。インターン生の市川です。今回は検索エンジン-自然について…

  3. Adobe Analytics

    Adobe AEP SDKをTypeScriptで開発したReactNativeアプリに実装する

    こんにちは、エクスチュアの権泳東(權泳東/コン・ヨンドン)です。…

  4. Adobe Analytics

    はじめてのAdobe Analytics実装

    前回までの3回のブログで、イメージリクエストやアクセス情報の取得の原理…

  5. Adobe Analytics

    Looker: Sankey Diagramを使ってサイト内フローを可視化する

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

  6. Adobe Analytics

    ページでの滞在時間とは-Adobe Analyticsの指標説明

    今回はページでの滞在時間について説明いたします。ページでの滞在時間と…

最近の記事

  1. Snowflakeや最新データ基盤が広義のマーケティングにも…
  2. 回帰分析はかく語りき Part3 ロジスティック回帰
  3. GCSへのSnowflake Open Catalogによる…
  4. VPC Service Controlsで「NO_MATCH…
  5. モダンデータスタックなワークフローオーケストレーションツール…
  1. IT用語集

    インターフェイス(Interface)って何?
  2. IT用語集

    AWS(Amazon Web Service)って何?
  3. Adobe Analytics

    Adobe Analytics: Datafeedのログからフォールアウトレポー…
  4. IT用語集

    コンポーネント、モジュール、ライブラリって何?
  5. GitHub Actions

    GitHub ActionsでGCEへのデプロイを楽にしてみた
PAGE TOP