ユーザーエンゲージメントトラッキングチュートリアル

概要

ユーザエンゲージメントはWebサイト上でユーザが行った様々な行動の参照を可能にします（コメントの投稿、ページ内検索、クイズの回答、気象予測など）。DMPイベント(またはパフォーマンスイベント)によってユーザの行動を追跡します。

上記の図についてはページビューイベント（as トラフィックイベント）がユーザのページ移動やそのページの情報を保持し(いつ訪問したのか、そのページにどの程度の時間滞在したのか、アクセスユーザの利用ブラウザ、どの地域からアクセスしているのか等)、DMPイベント は訪問中のページのコンテンツとユーザのイントラクションを取り扱います。ページビューイベントに関連する手順は緑で、DMPイベントに関連する手順は青です。

この場合、DMPイベントは広告キャンペーンのインプレッションとクリックを集計する為に利用されています。最初のページでは広告がページ上部に表示されていますが、ユーザはそれに対してアクションを起こしていません（そのため、青枠の2.のイベントがインプレッションDMPイベントとなっています）。次のページでは、ユーザは表示された広告に対してクリックを行い、広告の遷移先ランディングページへ移動しています(緑枠の6)。ユーザがページ遷移する前に発生した二つのDMPイベント(広告のインプレッションとクリック)が送られています(青枠の5)。

このチュートリアルの最後では、Webページの特定の領域がユーザの視界に表示されている時間を計測します。ページの透過領域はブラウザのウィンドウがそこを表示していることを示します。ページの上部からどのように現在のポジションまでスクロールされたかを見ることが出来ます。

矢印で指されている青枠の領域が追跡を行いたい箇所です。このチュートリアルではその箇所をdivタグで表します。

前提条件

トラッキングに利用する cX.sendEvent() 関数は DMP(現 Piano Audience) 及びLTS(データ保持期限に関するオプション) を有効化している事が必須です。これらは有償オプションにつき、ご契約がない場合は担当のアカウントマネージャーに、設定の有無が不明な場合はサポート(support@piano.io) までご連絡ください。

シンプルな要素の追跡

下記のHTMLページのテンプレートのコードはonclickやonmouseover等のシンプルなイベントの追跡を可能にします。このテンプレートの例は次の2つの部分で構成されています。

追跡を行いたいアクティビティを持っているHTMLの要素 (例：マウスがその上に乗っている)
下記の例では、HTMLの要素 someHtmlElement はアクティビティ someElementEventと比較して追跡されています。
アクティビティをPiano DMPに送信する機能。下記の例では sendEvent() 関数を利用しているのが見られます。この機能は送信を行うために cX.setEventAttributes() と cX.sendEvent() を内部で実行しています。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Simple Element Tracking</title>
</head>
<body>
    <script type="text/javascript" src="http://cdn.cxense.com/cx.js"></script>
    <script type="text/javascript">
		        cX.setSiteId('9999999999999999999');
		        cX.sendPageViewEvent();
 
        		var persistedQueryId = '1234567890123456789012345678901234567890'
		        var prefix           = 'xyz';
		        var origin           = 'webpage';
		        cX.setEventAttributes({ origin:prefix + '-' + origin, persistedQueryId:persistedQueryId });

		        function sendEvent(eventType, eventName) {
            			cX.sendEvent(eventType, { action: eventName });
 		        }

	</script>

 	<div>
 		<someHtmlElement onSomeElementEvent="sendEvent('event_type', 'event_name')">
	</div>
</body>

変数解説

上記のコード内の変数は以下の通りです。

origin - 送信されたイベントソースを識別するために使用される文字列。
例：通常のWebページイベントはwebsite、CxenseDisplay（日本未使用）の場合はcxdisplay、
　　パブリッシャ広告Double Clickはdfpなどです。
event type - イベントの種類を示す文字列、例：読了率。
event name - カスタムパラメータ（パフォーマンスパラメータ）名。ここで指定した名称がDMPのパフォーマンスデータの画面に表示されます。
prefix - お客様ごとに異なる3文字のプリフィックスです。不明な場合にはPiano 担当者までお問い合わせください。
persisted query id - persistedクエリは、事前登録してあるAPIを呼び出すためのidが割り当てられ、idを参照するだけで実行できます。登録方法は「Persisted Query Id生成」セクションを参照ください

関数

以下2つの　Piano DMP ライブラリ関数がテンプレートで利用されます。

cX.setEventAttributes() - cX.sendEvent(eventType() の前に設置する必要があります。送信するDMPイベントと作成済みのpersistedクエリidを引数にセットします。
cX.sendEvent(eventType) - DMPイベントを送信します。この関数で全ての処理が実行されます。

実際のHTMLサンプル

これまでのサンプルには存在しないHTML要素とイベントが含まれていました。以下では、実際に利用可能なHTML要素とイベントの例を示します。

<div>
	<button onclick="sendSomeEvent('button_event', 'button_click')">Click me!</button>
</div>
 
<div>
	<a href="http://www.cxense.com/">
		<img onmouseover="sendSomeEvent('image_event', 'image_mouse_over')" src="https://www.cxense.com/wp-content/uploads/2015/05/logo.png">
	</a>
</div>

Persistent クエリID 生成

以下のPython 3.x向けに書かれたスクリプトは、上記のhtmlソースで必要とされるPersisted クエリIDを生成します。
※ Persisted クエリIDの作成には権限が必要です。詳しくは /persisted/create をご覧ください。

_username     = "<YOUR PIANO INSIGHT USER ID>"
_secret       = "<YOUR PIANO INSIGHT API KEY>"

import json, datetime, hmac, hashlib, http.client
    
def cxApi(path, obj):
    date = datetime.datetime.utcnow().isoformat() + "Z"
    signature = hmac.new(_secret.encode('utf-8'), date.encode('utf-8'), digestmod=hashlib.sha256).hexdigest()
    headers = {"X-cXense-Authentication": "username=%s date=%s hmac-sha256-hex=%s" % (_username, date, signature)}
    connection = http.client.HTTPSConnection("api.cxense.com", 443)
    connection.request("POST", path, json.dumps(obj), headers)
    response = connection.getresponse()
    status = response.status
    responseObj = json.loads(response.read().decode('utf-8'))
    connection.close()
    return status, responseObj
  
def errorHandling(status, response, message):
    if status != 200:
        raise Exception("%s (http status = %s, error details: '%s')" % (message, status, response['error']))
 
def createPersistentQuery():
    status, response = cxApi('/persisted/create', {"path":"/dmp/push", "request":{"events":[]}, "mutable":{"events":True}})
    errorHandling(status, response, "Unable to create a persistent query")
    return response

print(createPersistentQuery())

エンゲージメントレポート

収集したイベントデータは、DMPメニュー上部のレポート > パフォーマンス > パフォーマンスパラメータで確認できます。

高度なトラッキング方法

これまでは、onclickやonmouseoverなどのシンプルなイベントをどのように追跡できるかを開設しました。インビュートラッキングなど、より複雑なケースを見ていきます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Advanced Element Tracking</title>
</head>
<body>
 
        <script type="text/javascript" src="http://cdn.cxense.com/cx.js"></script>
        <script type="text/javascript">
                cX.setSiteId('9999999999999999999');
                cX.sendPageViewEvent();
                cX.trackElement({ elementId: 'my_div', trigger: {
                              on: function(state) { return state.visibility.timeHalf >= 1.5; }, // Seconds
                              callback: function(state) {
                                    cX.setEventAttributes({ origin: '<CUSTOMER-PREFIX>-' + 'website', persistedQueryId:'<YOUR PERSISTED QUERY ID>' });
                                    cX.sendEvent('Visibility', { action: 'my_div_is_visible' });
                              }
                       }
                });
 
         </script>  
 
	    <div id="my_div">My Div</div>
</body>

この例では、ページコードの下部にあるdiv id = "my_div"のビューアビリティ（ユーザの可視領域）を追跡しています。

実際の稼働例

実際の動作やコードの例をこちらのページでご用意しています。

Last updated: April 08, 2026