マウス
最終更新日 :
2021年4月28日
この記事では、Web サイトからカスタムイベントを使用して Dynamic Tag Management（DTM）ルールをトリガーする方法について説明します。
ブラウザーイベント
イベントとは Web ページ上で何かが起きたことを示すシグナルです。開発者はこれらのシグナルを利用して応答を返したり、対策を講じたりすることができます。
イベントはラジオ放送のようなものと考えることができます。ラジオ放送はあらゆる人に向けて発信されますが、放送を聞くには周波数を合わせる必要があります。誰も放送を聞かなければ、影響は一切ありません。同じことがイベントにも当てはまります。イベントをトリガーしても、それをリスニングしているものが何もなければ、エラーは返されません。また、問題やエラーが発生しない限りはトリガーされないイベントをリスニングすることもできます。
HTML イベントについて詳しくは、次の資料を参照してください。
DTM でのイベントベースルールの使用
イベントベースルールを作成する際には、特定のデフォルトイベントを対象としたルールを設定できます。各ブラウザーには次のようなデフォルトイベントがあり、特定のアクションが発生するとこれらのイベントがトリガーされます。
- マウスクリック
- マウスオーバー（ページ内の特定の要素の上にマウスが移動したとき）
- フォームフィールドへのフォーカス移動（カーソルがフォームフィールド内に移動したとき）
- フォームフィールドからのフォーカス移動（カーソルがフィールド外に移動したとき）
- フォーム送信
これらのイベントは Web 上で毎日のように発生しているので、各イベントがどのようなものかはよくわかると思います。ブラウザーのデフォルトイベントだけでは必要な情報を収集できない場合は、代わりに JavaScript イベントを使用できます。
DTM にはどのようなイベントが組み込まれていますか？
DTM のイベントベースルールには次のイベントが組み込まれています。
|
|
キーボード |
フォーラム |
HTML5 ビデオ |
モバイル |
その他 |
|---|---|---|---|---|---|
|
click mouseover |
keypress |
focus blur submit change |
ended loadeddata play pause stalled volumechange % complete time complete |
orientationchange zoomchange |
custom enters viewport element exists pushState or hashchange |
カスタムイベント
イベントをリスニングするには、まずイベントをトリガーする必要があります。イベントの定義は、サイトのコード内で開発者がおこないます。イベントを使用する状況や場所を見きわめるのは難しい場合もあります。原則として、DTM に組み込まれているイベントで収集したい情報を収集できない場合は、カスタムイベントを使用してください。
イベントのトリガー
次の例で使用されているカスタムイベントは、データの追加を目的としています。例えば、ショッピングカートにアイテムが追加されると AJAX が使用されるページがあるとします。このとき、新しいページは表示されず、アイテムがカートに追加されたことを通知するポップアップウィンドウまたはメッセージが表示されます。このアクションが発生したときに何が追加されたかを具体的に通知するカスタムイベントを作成できます。
var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice});
document.getElementById('minicart').dispatchEvent(addToCart);
上のコードでは、「data」というオブジェクトからデータを参照しています。また、「detail」というカスタムデータがオブジェクトとして定義されているので、このオブジェクトを参照することでイベントをリスニングできます。作成したイベントは特定の要素に対してトリガーすることができ、この例では「minicart」という ID を持つページ上の要素に対してイベントをトリガーしています。このようにすることで、リスニングしたいと考えているすべての人に向けてブロードキャストされるカスタムイベントを作成できます。
カスタムイベントリスナーの追加
DTM では、イベントベースルールを追加する場合と同様に、カスタムイベントリスナーも簡単に追加することができます。
DTM でリスニングをおこなうためのルールを設定するには、次の手順に従います。
-
新しいイベントベースルールを追加します。
-
ルールに名前を付けます。
-
イベントタイプとして「custom」を選択し、イベント名を入力します（この例では、addToCart としています）。
-
このイベントが発生する可能性があるタグまたは要素を定義します。定義には CSS セレクターを使用します（この例では、#minicart を選択しています）。
-
適切なビーコンを発行するようにルールを設定します。
ご質問がある場合
この記事を含め、DTM のトピックに関してご質問がある場合は、DTM コミュニティフォーラムにお立ち寄りください。このフォーラムでは質問を投稿したり、ディスカッションに参加したり、それぞれの解決策に関する最新情報を入手したりすることができます。
ご自身のブログ投稿の一部をこの記事のために利用することを許可してくださった Adam 氏に感謝いたします。
