このブログで使っていたTurbolinkをTurboに変更しました。
Turboに変更したところ、Turbolinkのページビュー送信コードでは、動作しなくなったので、コードの変更を実施しました。
変更した点と、GTMの設定について記載します。

Turboのバージョン

7.2.0 を利用しています。 

npm list --depth=0 | grep @hotwired/turbo
├── @hotwired/turbo@7.2.0


// Turbolinkで遷移した場合の初期化処理
document.addEventListener('turbolink:load', function(event) {
  const url = event.data.url;
  dataLayer.push({
    'event': 'turbolinks_load_pageView',
    'virtualUrl': url,
  });
  previousUrl = event.data.url;
});

Turboのページビューイベントの送信コード

変更点は以下の2点です。
* イベント名が、turbolink:load から turbo:load へ変更になった。
* urlの格納先が、event.data.url から event.detail.url へ変更になった。 

// Turboで遷移した場合の初期化処理
document.addEventListener('turbo:load', function(event) {
  const url = event.detail.url;
  dataLayer.push({
    'event': 'turbolinks_load_pageView',
    'virtualUrl': url,
  });
  previousUrl = event.detail.url;
});

GTMでの設定

GTM(Google Tag Manager)では以下の設定を行なっています。

カスタムイベントトリガーの作成

Image from Gyazo
以下の設定でカスタムイベントトリガーを作成します。

  • トリガーのタイプ
    カスタムイベント

  • イベント名
    turbolinks_load_pageview

  • このトリガーの発生場所
    すべてのカスタムイベント

タグを作成

Image from Gyazo GA4のタグを作成し、作成したカスタムイベントトリガーをトリガーとして登録します。

設定は以上です。

コメント

カテゴリー

最近の投稿