Googleタグマネージャーの使い方・応用編〜対象ページのURLが同じ場合２〜

※本記事は、タグマネージャーの使い方をお届けするシリーズの第4回目です。

前回の記事は、JavaScriptのグローバル変数をページごとに別々に宣言して、その変数の値を条件にGTMでタグを貼り分けるという内容でした。

判定条件をグローバル変数にしたのは、当ブログでYTM（Yahooタグマネージャー）について扱った際の内容に合わせたのが理由なのですが、実際にはグローバル変数がページごとにあらかじめユニークに宣言されているということは少ないことが予想され、（URLが同じで状態が違うページにタグを貼りわけるという状況が特殊ですが）タグマネージャー導入のためにHTMLを変更する必要が発生してしまいます。

URLは同じだが状態が違うという２つのページは、例えば入力ページと確認ページについていえば、ページの内容が違うわけで、ページのHTML要素にはなんらかの違いがあるはずですから、その違いを条件にする方が、利用できるケースとしては多いと思います。

GTMでは、トリガー（タグの読み込み条件）として、ページ内のHTML要素内の文字列が「xxx」であれば「yyy」というタグを読み込む、といった設定が可能です。

そこで今回は、ページのHTML要素の内容を条件にしてページを判定し、読み込むタグを分ける方法を紹介します。

GTMのおさらいと前提

GTM（Googleタグマネージャー）については説明を割愛します。過去の記事をご覧ください。

Googleタグマネージャーの使い方・基本編〜対象ページのURLが別な場合〜
https://f-tra.jp/blog/howto/7750

GTMでは、「変数」「タグ」「トリガー」の３つを設定することがポイントでした。
「変数」「タグ」「トリガー」はそれぞれお互いに関連しあっており、「変数」が特定の値を持つという条件が「トリガー」であり、条件が満たされると「タグ」が読み込まれるというのがGTMの基本的な概念です。

今回は、ページのh1タグの中身の文字列の内容を条件に、読み込むタグを指定する方法を紹介します。

前提として、入力ページの場合、

<h1 id="pageTile">入力</h1>

というタグがページ内にあり、

確認ページの場合、

<h1 id="pageTile">確認</h1>

というタグがページ内にある、という前提で以降の設定を行います。

前回と今回で違う点。変数にDOM要素を登録する

「変数」を設定する

タグを読み込む条件の主語にあたるのが「変数」です。トリガーは「いつ」「何（変数）」が「どんな値」を「含む」かという内容ですが、この主語「何」をまず作成します。変数の指定は「種類の選択」「変数を設定」の２項目について行います。

ユーザー定義変数登録

今回はHTML内の要素が含む文字列を条件にしますので、種類として「DOM要素」を指定します。

DOM要素の場合の「変数を設定」の選択方法として「ID」「CSSセレクタ」が選択できます。
※「CSSセレクタ」はInternetExplorer7ではサポートされないとのことですのでご注意ください。

それぞれ「要素ID」と「属性名」、「要素セレクタ」と「属性名」を指定可能で、「属性名」を空にしておくと、変数の値はDOM要素のテキストになります。

動作範囲に制限はありますが、簡単なのは、CSSセレクタの方です。スタイルシートを書く要領で、セレクタを指定すればOKです。今回はh1タグですから、

• 選択方法＝「CSSセレクタ」
• 要素セレクタ＝「h1」

変数名は、任意の内容でOKですが「h1要素」と指定しておきます。（あとでトリガーを設定する際にこの名前を用います）

GTM変数-要素h1

一方、h1タグが持つID属性（id=”pageTitle”）を使ってh1タグを認識する方法も考えられます。

• 変数の選択方法＝「ID」
• 要素ID＝「pageTitle」

と登録します。変数名は「IDpageTitle」としておきます。

GTM変数-要素ID

「トリガー」を設定する

次にトリガーの設定です。入力ページ用、確認ページ用の２つを作る必要があります。

• イベント（いつ条件判定を行うか）＝「ページビュー」
• トリガーのタイプ＝「DOM Ready」（ページの読み込みが完了し表示できる状態になったら）
• 配信するタイミング＝「h1要素」「含む」「入力」（確認ページの場合は「確認」）

トリガー名も、任意の内容でOKですが「トリガー要素判定-入力P用」「トリガー要素判定-確認P用」とします。

GTM変数-トリガー入力P用

「タグ」を設定する

最後に「タグ」を設定します。これも入力ページ用、確認ページ用の２つのタグを登録します。

• プロダクトを選択＝「カスタムHTMLタグ」
• タグを設定＝タグの内容をコピー＆ペーストします。
• 配信するタイミング＝その他から、登録済みのトリガー「トリガー要素判定-入力P用」または「トリガー要素判定-確認P用」を指定します。

入力ページ用のテストタグ

<script type="text/javascript">
  $(document).ready(function(){
	  console.log('入力ページ用タグ');
  });
</script>

GTM変数-タグ要素判定

公開・動作の確認

最後に、右上の「公開」でコンテナタグに設定を反映し、目的のページにアクセスして目的のタグがそれぞれ読み込まれていることを確認します。

今回の場合、入力ページが表示された時には、コンソールに「入力ページ用タグ」、確認ページの場合は、「確認ページ用タグ」と出力されることでOKとしました。

最後に

いかがだったでしょうか。今回は、ページのh1タグの中身の文字列の内容を条件に、GTMで読み込むタグを指定する方法を紹介しました。