このブログでは、
この
Python Google Analytics の
良い方法が
結果を
前提
このブログは、
このbeforeunload
イベントがturbolinks:visit
、onpopstate
へ
turbolinksチートシート - Qiita にturbolinks:visit
がonpopstate
にも
やった こと
以下、
Turbolinks の 初期化処理で GT Mイベント pageExit
を 発行する イベントリスナを 設定する
Turbolinks のpageExit
を
Trubolinks だとScroll Depth Threshold
を
スクロール率の
Cross-Browser Method to Determine Vertical Scroll Percentage in Javascript - Stack Overflow
import Turbolinks from 'turbolinks'; function currentScrollPercentage() { return ((document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100); } function pushPageExit(url) { performance.mark('pageExit'); let timeOnPage = performance.measure('timeOnPage', 'pageStart', 'pageExit').duration / 1000; performance.clearMarks('timeOnPage'); dataLayer.push({ event: 'pageExit', exitUrl: url, timeOnPage: timeOnPage, scrollPercentage: currentScrollPercentage() }); } let previousUrl; // Turbolinksで遷移した場合の初期化処理 document.addEventListener('turbolinks:load', function(event) { let url = event.data.url; dataLayer.push({ 'event': 'turbolinks_load_pageView', 'virtualUrl': url, }); dataLayer.push({ 'event': 'optimize.activate', 'virtualUrl': url, }); previousUrl = event.data.url; performance.mark('pageStart'); }); document.addEventListener("turbolinks:visit", function(event){ var url = event.data.url; pushPageExit(url); }) document.addEventListener('beforeunload', function() { let url = location.href; pushPageExit(url); }); document.addEventListener('popstate', function(e){ if (previousUrl) { pushPageExit(previousUrl); } }); // Turbolinks処理開始 Turbolinks.start();
各イベントの
turbolinks:load
ページ読み込み後に呼び出させる イベントリスナです。
内部でページ読み込み後の URLの 保持。
User Timing API でページの 読み込み 開始を マークしています。 turbolinks:visit
サイト内リンクを クリック後、 ページ読み込み前に 起動する イベントリスナです。
離れるページに 対する スクロール率と、 ページ滞在時間を GTMイベントと して 送付します。 beforeunload
サイト外リンクのクリック時に 呼び出されます。
実施していることは、 turbolinks:visit と 変わりありません。 popstate
戻るボタン、 進む ボタンクリック時に 読み出されます。
このケースは、 turbolinks:visit は 呼び出されません。
また、URLと して 遷移後の URLのみ 取得可能なので、 この ケースで 前の ページの URLを 送付する ため、 previousUrl を 使用しています。 補足 currentScrollPercentage関数に
ついて
Google Tag Mamager でスクロール率を 保持する 組み込み 変数が ありますが、 Turbolinks で 次ページへ 遷移した 後、 スクロール率が 0に 戻らず、 100%の ままに なっていました。 どうやら ページの 再読み 込みが 行われないため、 1度 100% に なってしまうと、 クリアされないようでした。
Google Tag Manager の組み込み 変数で 測るのを 諦めて、 JavaScript側で 計算の ために 作成した 処理に なります。
まだ、考慮不足な 点として 一度 100%まで 投了して スクロールを 動かし、 その 後画面上部の リンクを クリックすると、 スクロール率は 100%ではなく、 リンクを 押した 際の スクロール率が 設定され、 100%まで スクロールした 記録が 残りません。
定期的に実行して 最大スクロール率を 保持する ことで 対応できそうですが、 ブラウザに 負荷が かかりそうですので 一旦 このまま 様子見しようかと 思います。
イベントトリガー pageExit を 作成する
Google Tag Manager で
スクロール距離トリガーを 作成する
10%間隔で
今回のScroll Depth Threshold
を
- 補足
JavaScriptでスクロール率を 計算しているので、 Google Tag Manager側で この 変数を 使用する ことは ありません。
試しに作った 時の 参考情報と なります。
GTM データレイヤー変数を 作成する
GTMイベント pageExit
送付時に
exitUrl
timeOnPage
scrollPercentage
ページ離脱時の イベント計測用の GAイベントタグを 作成する
以下、
transport
、beacon
を
対応していない
参考
- beforeunloadに
ついて - beforeunload - イベントリファレンス | MDN
- Javascriptの
onbeforeunloadと onunloadに ついて - Qiita - User Timing API
- User Timing API: あなたの
Web アプリを もっと 理解する ために - HTML5 Rocks Navigator.sendBeacon()
- Navigator.sendBeacon() - Web API | MDN
これで、
以上です。
コメント