[GTM Tips01] トリガーを複雑化させない技(モバイルディレクトリ編)

Googleタグマネージャの中級者・上級者ともなると、1コンテナに対して登録しているタグやトリガーの数は数10を超えていることかと思います。実際、自分の管理しているアカウントの中にはタグ、トリガー、変数を合わせて150ほど登録されているものもあります。こうなってくると、設定内容を把握するだけでも大変な労力が必要になり、他の人にアカウントを引き継ぐことが難しくなってしまいます。

今回は、サイトのURL構造上、モバイルディレクトリが存在するパターンを例題に、トリガーを複雑化させない技について紹介します。

モバイルディレクトリによりトリガーが複雑化する例

サイト構成

まずサイトの構成としてモバイルサイトのURLが http://example.com/sp/index.html のように、第1ディレクトリが「sp」や「mb」などになっているケースが該当します。このようなケースで、「(PC、モバイルに関わらず)サイトのトップページに対して、特定のタグを実行させたい」となったときは、どういう方法が考えられますか？

主なやり方としては、「トリガーをPC用・モバイル用でそれぞれ作成する」方法、または「トリガー設定に正規表現を利用する」方法のどちらかかと思います。

トリガーをPC用・モバイル用でそれぞれ作成する方法

まず考えられる方法は「PCサイトのトップページ」を表すトリガーと「モバイルサイトのトップページ」を表すトリガーを作成して、タグの配信設定で、2つのトリガーを指定する方法です。例えば、下の画像のようなイメージです。

このやり方の場合、トップページ以外にいろいろなページに対してタグ設置を行いたくなると、トリガーの数がどんどん増えていき、最終的に下のキャプチャのようになってしまいます。美しくないですね。

トリガー設定に正規表現を利用する方法

トリガーの数を増やさないために、1つのルールで正規表現を使って実施する、という方法も考えられます。これも例としてキャプチャを下に載せました。

やりたいことは実にシンプルなはずなのに、正規表現を使わなければいけない。正規表現は強力であるものの、指定方法が複雑なので、できるだけ使わないに越したことはありません。

これらの方法の問題点

まず、トリガーをPC用・モバイル用でそれぞれ作成する方法ですが、タグ配信対象のページが増えてきたときに、トリガーの数がどんどん増えていってします。トリガーには、ページビューのものだけでなく、リンククリックに関するトリガーやカスタムイベントを使ったトリガーなども登録されるので、不必要なトリガーを作成すると、管理が煩雑になってしまいます。

では、トリガーを増やさないために、トリガー設定に正規表現を利用する方法はどうでしょうか？この方法なら、確かにトリガーの数を不必要に増やすことはありません。ただし、正規表現は強力であるものの指定方法が複雑なので、できるだけ利用を避けることが懸命です。今回の例であれば、単純なのですぐに何を指定しているか判断できますが、これがどんどん複雑化したときのことをイメージすると、使いたくないでしょう。

解決策：変数を作成して、トリガー設定を簡素化する方法

上記2つの方法の問題点をスマートに解決するためには、変数をたった1つ作成するだけで済みます。

作成する変数は、少し複雑な処理をする必要があるため、カスタムJavaScriptにて作成する必要があります。とはいえ、記載するコードはたったの8行で済んでしまう点とサイトに合わせて変更するべき箇所はたった1箇所なので、プログラミングに詳しくない方でも気軽に導入できるかと思います。

作成する変数の役割

そもそもの問題は、モバイルページであるかPCページであるかによって、変数 Page Path の値が異なる点にあります。そこで、今回「基本的な動きは、Page Pathと同様だが、モバイルディレクトリspは省略したものを返す」処理を行う変数を作成します。

こうすると、トップページであれば、モバイル版であってもPC版であっても同じ値が返ってくるので、トリガーの作成時には、モバイル版なのかPC版なのかを意識する必要が有りません。

作成する変数のJavaScriptコード

作成する変数は下記の内容になります。「種類を選択」で「カスタムJavaScript」を選択し、テキストボックスに下記のスクリプトを入力してください。また、変数名はわかりやすく「Page Path - SP統合」としておきます。

このスクリプトでは、モバイルディレクトリを「sp」としていますが、3行目の「var dirname = 'sp'; 」の「sp」の箇所を適宜サイトの構造に合わせて変更してください。

// Page Path - SP統合
function () {
  var dirname = 'sp';
  var pathname = {{Page Path}};
  if (pathname.substr(0,dirname.length + 2) == '/' + dirname + '/') {
    return pathname.substr(dirname.length + 1);
  }
  return pathname;
}

トリガーでの指定方法

トリガーでは、今までPage Pathを使っていた箇所の代わりに、先ほど作成した変数「Page Path - SP統合」を利用します。すると、PC用サイトのURL構造とモバイル用サイトのURL構造を機にすることなく、全てPC用サイトのURL構造でトリガーを設定することができるようになるため、作成するトリガーの数を減らしながらも、トリガーの指定に正規表現を使う必要がなく、シンプルなトリガーで作成できるようになります。

もし、PC用サイトとモバイル用サイトそれぞれに特化したトリガーが必要になったときは、必要なものだけ、最初のやり方で作成すれば問題ありません。

まとめ

タグマネージャーは、簡単かつ手軽にタグ設置ができる反面、意識しないで使っていると、いつのまにかタグやトリガー、変数の数が膨大になってしまい、他のメンバーが把握できない状態になってしまった！という状況に陥りやすいです。

そのような状態を避けるためにも、できるだけシンプルな方法でタグ実装できないか？常に意識してみましょう。そして、シンプルな方法で実装するために重要な要素は、変数です。この変数を使いこなしてこそ、Googleタグマネージャ・マスターでしょう。