GTMの新機能「要素の表示(スクロールイン)」を使って汎用的なGAイベントを設定してみた

つい先日、GoogleTagManager(Googleタグマネージャ、GTM)に、主にスクロール挙動に対する機能である「スクロール距離」と「要素の表示」のトリガーが追加されました。

サイト内改善を行っていくにあたって、欲しいと思う場面の多い機能だったのでありがたいですね。(つい先日同じ機能をjsで書いてしまったばかりですが…)

今回早速「要素の表示」トリガーを使う機会があって、汎用的なGAイベントトラッキング用のタグを設定してみたので、社内共有も兼ねて記事にします。

設定したタグの仕様

• 「gtm_scroll_in_event」というCSSクラスを付与した要素が画面内に表示された時に、GoogleAnalyticsのイベント計測のタグ配信が行われる。
• 「gtm_scroll_in_rate」という属性に数値を設定することで、要素の何%が画面内に入った時にタグが配信されるかを設定できる。
• 「gtm_scroll_in_event_label」という属性の値を、GAのイベントラベルに設定する。
• 対象のDOM要素がAjax等によって後から追加・変更される場合に対応

1. 変数の設定

gtm.element¹

有効になっている「要素の表示」トリガーに指定された要素が画面内に入った時、「gtm.elementVisibility」というGTMイベントが発生します。
GTMのプレビューモードで確認するとわかるのですが、このイベントが発生する際、該当する要素そのものをgtm.elementというキーでdataLayerに乗せて飛ばしています。
今回はこれを用いて、要素内の各属性の値を取得するので、変数に格納しておきます。

変数の種類：データレイヤーの変数
データレイヤーの変数名：gtm.element
データレイヤーのバージョン：バージョン2

gtm_scroll_in_rate

該当要素に指定する「gtm_scroll_in_rate」属性の値を変数に格納します。
こちらはカスタムJavaScriptを使って、先程設定した「gtm.element」から値を抽出しています。
二重中括弧{{}}はGTM変数を参照する際に使う記述法です。²
有効になっている「要素の表示」トリガーに指定された要素が画面内に入った時、「gtm.elementVisibility」というGTMイベントが発生します。
このイベント時の自動イベント変数を使って(イベント時にgtm.elementで送信している内容が自動イベント変数の元の要素となります)、「gtm_scroll_in_rate」を取り出します。
属性の設定が無い場合はデフォルト値として50を設定しています。

変数の種類：自動イベント変数

gtm_scroll_in_event_label

該当要素に指定する「gtm_scroll_in_event_label」属性の値を変数に格納します。
こちらもカスタムJavaScriptを使って、先程設定した「gtm.element」から値を抽出しています。
二重中括弧{{}}はGTM変数を参照する際に使う記述法です。³
同じく自動イベント変数を用いて取得します。

変数の種類：自動イベント変数

2. トリガーの設定

トリガーの種類：要素の表示
選択方法：CSSセレクタ
要素セレクタ：.gtm_scroll_in_event
このトリガーを起動するタイミング：お好みで
視認の最小割合：先程設定したGTM変数「gtm_scroll_in_rate」
画面上での最小表示時間を設定：必要に応じて
DOMの変化をモニタリング：必要に応じて
このトリガーの発生場所：必要に応じて

上記のように設定します。
注意点として、画像の警告文にもあるように、CSSセレクタ&DOMの変化に対応する場合、パフォーマンスに影響が出る可能性があるため、そのあたりは適宜考慮して下さい。
DOMの変化に対応する必要がない場合はオフにした方が良いと思います。
または、DOM変化対応用と非対応用でタグを分け、必要に応じて運用するのが良いと思います。

3. タグの設定

タグタイプ：ユニバーサルアナリティクス
トラッキングタイプ：イベント
カテゴリ：お好みで(画像では、RubyonRailsのcontrollerとactionで設定しています)
アクション：お好みで
ラベル：先程設定したGTM変数「gtm_scroll_in_event_label」を含めたもの
値：お好みで。トリガー側で「画面上での最小表示時間を設定」を使っている場合、組み込み変数の「On-Screen Duration」を使って、表示時間を入れても良いかもしれないです。

4. html側設定例

<div class="gtm_scroll_in_event" gtm_scroll_in_event_label="スクロール要素テスト" gtm_scroll_in_rate="30">
  スクロール要素テスト
</div>

以上で設定は完了です。
このタグを1つ設定するだけで済むので、新しい要素の表示イベントを計測したいと思う度にタグの設定をしたり、タグやトリガーが増えすぎて管理できなくなったりしないのが利点です。
1GAイベントに1タグを設定していると管理が非常に煩雑になってしまうので、このような汎用タグを設定するのが良いと個人的に思っています。

また、要素の属性に設定するだけで計測が可能になるので、一度設定した後は誰でも設定できると思います。

是非使ってみて下さい。

---

↓以下ではGTMによるPV計測と、自作のGTM用Gemの導入法が書いてありますので、こちらも是非↓
GoogleTagManagerを簡単に使うためのRails用Gemを作ってみた(GTMを使ったPV計測の設定方法)

---

注釈

---

1. カスタムJavascriptを使用する方法から修正しています。@1987yama3さんありがとうございました。 ↩

2. カスタムJavascriptを使用する方法から修正しています。@1987yama3さんありがとうございました。 ↩

3. カスタムJavascriptを使用する方法から修正しています。@1987yama3さんありがとうございました。 ↩