【便利】Googleタグマネージャーに必須の4つのカスタム変数

この記事では、僕がほとんどの GTM コンテナで使用している、必須の Google タグマネージャーカスタム変数トップ 4 を紹介します。

#1. ページタイトル/ページ名

なぜこれがデフォルトで利用できないのか謎ですが、クリックなどのイベントが発生したページタイトルを取得する必要性は大きいと思います。

幸いなことに作成するのは超簡単です。

変数 > 新規 > JavaScript 変数 > グローバル変数名 に進みます。そして

document.title

を入力して保存すればOKです。

GTM プレビューとデバッグモードを有効にして、これが表示されたらOKです。

#2. 特定の要素のタイトル

例えばページ内の h2 や h1 の要素のテキストを取得したいケースもあると思います。

変数 > 新規 > カスタム JavaScript に進みます。そしてカスタム JavaScript に以下のコードを入力します。

function() {
var panelTitleElement = document.querySelector('h1.panel__title');
if (panelTitleElement) {
return panelTitleElement.textContent || panelTitleElement.innerText;
}
return '';
}

上記では h1.panel__title のテキストを取得するようにしているので、状況に応じてこの部分はカスタマイズしてください。

#3. ALTテキスト

ウェブサイトにクリック可能な画像が多数含まれている場合は、どの画像が最もクリックされているかを追跡するとよいかもしれません。

Google タグマネージャーコンテナで、変数 > 自動イベント変数 に移動し、次の設定を選択します。

自動イベント変数は、訪問者が操作する要素の特定の値を取得します。この場合、訪問者が Web サイトの任意の要素をクリックすると、新しく作成された変数がその要素に属するalt 属性を探します。

要素 (画像またはリンク) に alt 属性がない場合、変数は未定義の値を返します。 alt 属性がある場合は、属性の値を取得します。

#4. ダウンロードファイルの名前

すでに GTM を使用してファイルのダウンロードを追跡している場合は、URL 全体をイベントアクション (またはイベントラベル) として Google アナリティクスに送信している可能性があります。

たとえば、ユーザーが PDF ファイルへのリンクをクリックします。イベントアクションとしてhttps://www.example.com/files/guides/ultimate-guide.pdf をGoogle アナリティクスに送信します。

これは問題なく機能しますが、データの読みやすさはあまり良くありません。

GA レポートで ultimate-guide.pdf だけを表示できればもっと良いですよね? 幸いなことに、これは非常に簡単です。次のコードを使用してカスタム JavaScript 変数を作成するだけです。

function() {
var filepath = {{Click Element}}.pathname.split("/");
var filename = filepath.pop();
var decodedFilename = decodeURI(filename);
return decodedFilename.indexOf(".") > -1?decodedFilename:'n/a';
}

重要:テストする前に、 Google タグマネージャーコンテナの組み込み変数のうち、クリック要素変数を有効にしてください。