【GTM - macro】Lookup Table(ルックアップテーブル)

あるマクロの返り値に応じて特定の値をルックアップし、新しいマクロ名で扱える、条件分岐ができます。
これも使い方によっては本当に重宝します。

例えば、上の例の場合はデバッグモードがONの時とOFFの時でGoogle Analyticsのトラッキングコードを変動させています。

他のやり方としては、月の数字をJanuaryなどの文字列に変換したり、ダウンロードファイルタイプによってイベント名を替えたり。そして一番驚いたのは・・・こういうものです。

確かにマクロを指定できるのですがこれは完全に頭がこんがらがりそうな感じです。

文字列がクリックされた場合はElementのタグを返して、リンクがクリックされた場合はリンクのURLを返す、Submitフォームの場合はそのSubmitされたidを返す。

確かに面白いですよね。

こんな面白い使い方ができてしまうのが、このルックアップテーブルです。

【参考】
Google Tag Managerに関するまとめ

【GTM - macro】Constant String、Container Version Number、Custom Event(カスタムイベント)

Constant String(定数文字列)は固定値をマクロに入れておくだけの箱です。

Analyticsコードや、カスタムHTMLなどの中にif文で分岐させて、特定の条件を満たした時だけ固定値を埋める。その他ルールで条件を指定しても良いかもしれません。

他にもDOM操作とともにinnerHTMLを操作するとか、Analyticsのイベントラベルに埋め込むとか。単なる箱といえばそれまでですが、システムリリースを待たずにサクッとリリースしてしまうという点ではとても良いですね。

Container Version Numberはプレビューモードで現在のコンテナバージョンを返しますので、例えばコンソールログへ吐くなどの設定が出来ます。

カスタムイベントは、デフォルトで「event」が用意されているものです。

通常タグを発火させるルールを作る時に、{'event' : '●●●'}という値をdataLayerで引き渡しますが、その「event」の部分を違う文字列で作成することができます。
これはGTMに無くてはならないものですね。

【参考】
Google Tag Managerに関するまとめ

【GTM - macro】Auto-Event Variable(オートイベント変数) - history URL系

自動イベント変数にあるHistoryURL系について簡単に説明します。

• History New URL Fragment
• History Old URL Fragment
• History New State
• History Old State
• History Change Source

これらはHTML5のURL操作系APIに絡んだもので、タグのヒストリーリスナーにひも付きます。

AjaxのページだけれどもpushStateなどを利用してコンテンツとURLを変更したり、ハッシュフラグメントなどを利用してコンテンツを変更した場合、そのstateやハッシュ、URLやタイトルをマクロとして取り込めます。

【ハッシュフラグメントを利用した場合】

Ajaxのページをロードした段階でのヒストリーリスナーの中身を見てみると、こうなっています。

そして、page1から動的にpage2へ遷移した場合はこうなります。

この「newUrlFragment」「oldUrlFragment」の値を見てください。

この部分がマクロの「History New URL Fragment」と「History Old URL Fragment」です。

また、historyChangeSourceがマクロの「History Change Source」に当たります。

popstateの他にpushState、replaceStateなどがあります。

【pushStateを利用した場合】

pushStateを利用した場合、このようなデータになります。

これは「Home Page」から「About」ページへ移動した時のデータですが、「newHistoryState」と「oldHistory State」が、マクロの「History New State」「History Old State」となります。

【参考】
Google Tag Managerに関するまとめ

【GTM - macro】Auto-Event Variable(オートイベント変数) - Element系

オートイベント変数のElement系では以下の変数タイプについて説明します。

・Element
・Element Class(イベントトラッキング用)
・Element ID(イベントトラッキング用)
・Element Target(イベントトラッキング用)
・Element Text
・Element URL(イベントトラッキング用)

まずはイベントトラッキング用のマクロが簡単なので、Element Classなど名前で一目瞭然な感じもしますが、一旦gtm.clickをしかけて中身を見てみます。
サンプルのページとしては、こんな単純なものを用意しました。

ソースはこうなっています。

ここで「test2」という部分のリンクでチェックをしてみると大体想像がつくと思います。

・Element Class : Elementに指定されているClassが返ります
・Element ID : Elementに指定されているidが返ります
・Element Target : クリック箇所がリンクだった場合、指定されたtargetが返ります
・Element URL : クリック箇所がリンクだった場合、URLが返ります。今回はURLのタイプを「Full URL」と指定していたので、プロトコルから全て値として返っています。

この辺りは例えば、「クリックされたリンク先URLが外部サイトで、且つtarget指定されていたもの」などのルールに利用が出来たりします。

次に残りの2つ、ElementとElementTextを説明します。
ElementはカスタムHTMLなどで利用して、クリックされたDOM要素を返します。また、Element Textはその名の通り、該当Element内のテキストを返します。

では実際どんな感じか試してみましょう。
まずは今回も先ほどと同じページでテストをします。

gtm.clickで発火させて、クリックする場所は「test1」のテキストとします。

凄く簡単ですがカスタムHTMLにはこんなものをセット。

また、クリック時のGoogle Analytics側のイベントとしては、こんなものをセット。

Analytics側からですが、クリックしたことによってアクションに「test1」が返ってきているのが分かります。

また、もう一つのカスタムHTML側ですが、クリック後のソースがこちら。

ちゃんと「id="checked"」が入っているのがわかります。

こんな感じでDOM操作も簡単に出来てしまうので、カスタムHTMLやカスタムJavascriptなどを利用して、じゃんじゃん発火させられます。

【参考】
Google Tag Managerに関するまとめ

【GTM - Tag】History Listener(ヒストリーリスナー)

2014年3月頃にリリースされたHistory ListenerはHTML5で導入されたURL操作系APIのpushStateとpopStateを対象にしたもので、これ自体はページ自体はAjaxでよく利用されているものです。

具体的にはGitHubで使われているもので、コンテンツ自体はAjaxなのでページがロードされることはないのですが、コンテンツが変更され、かつURLが変わるというものです。

GitHub pjax demo

従って、Ajaxであるにもかかわらずブラウザの「戻る」「進む」が利用出来るようになり、かつハッシュなしのURLになるためSEO面でも通常のウェブサイトと同じ効果が得られるというものです。

通常Ajaxを利用したウェブサイトはGoogleのbot等がクローリングできない、またはクロールできてもページとして完成されたものがサーバから返されないことに寄ってIndexされることはありません。

Googleでは_escaped_fragmentなどの代替手段を提示してはいますが。

※本コンテンツは若干認識がズレている場合があります・・・

【例】

まずは事前にHistory Listenerのタグを用意しておきます。

発火条件はテスト環境なので全てのページで発火するようにしています。

次にトリガーですが、以下の4つの方法があります。

• window.history.pushState()
• window.history.replaceState()
• popstate
• URL fragment(hash) change

まず一つ目のwindow.history.pushState()はAjaxのページですが、ブラウザの戻るボタンや進むボタンで戻ったり進んだりできるようにするもので、通常ページコンテンツ、タイトル、URLを渡します。

window.history.replaceState()はpushStateとほぼ同じ動きですが、新規にヒストリは残さず置き換えるものです。

popstateは「戻る」ボタンや「進む」ボタンを利用して履歴を移動した場合に発生するイベントです。

ちなみにこのあたりの動きはブラウザによってもかなり仕様が異なっているようですので、実際の実装に際してはブラウザの仕様確認は必須となります。

今回はこちらのページからhistory APIに関するサンプルファイルをダウンロードしたので、こちらを利用してGoogle Tag Managerの動きを確認します。

まず、gtm.historyChangeでどのようなstateオブジェクトが入ってくるのかChromeのDevツールで確認してみます。

HOMEからAboutへページ移動したときのgtmデータです。

gtm.newHistoryState.titeが"Home Page"から"About"へ変更されています。

また、gtm.historyChangeSourceに"pushState"値が入ってきています。

ブラウザの戻るボタンをおすとgtm.historyChageSoureに「popstate」が入ってきます。

F5でページを更新した場合など、replaceStateが走った場合の例がこんな感じです。

ある程度予約されているdataLayerが分かったところで、次にGoogle Tag Managerの設定に戻ります。

今回も確認のためにGoogle Analyticsのイベント側でデータを受けますが、ページの単純なリロードやreplaceStatementは除外して、pushStateとpopstateのみを検知させてみます。

まずマクロでgtm.historyChangeSourceの値をdataLayerとして格納します。
※今はマクロの「Auto-Event Variable」の中にVariable Typeとして「History Change Source」というものが用意されていました。

 次に発火条件としては、gtm.historyChangeが発生して、かつpopstateまたはpushStateの値が入ってきた場合のみ。

イベントは簡単な固定値でhistorychangeと入れておきました。

で、完成。

この辺になってくると、Ajaxやらブラウザの動き、HTML5のAPIや正規表現、デバッグツールや開発ツールを色々と使いながら検証する必要がありますね。。。

【参考】
Google Tag Managerに関するまとめ

【GTM - Tag】Form Submit Listener(フォームサブミットリスナー)

フォームサブミットリスナーはその名の通り、ウェブサイトに設置されているフォームでサブミットボタンが押された場合に発火させる場合利用します。
会員登録ページの登録ボタンや、サイト内検索ボタン、その他ページ内のCall To Actionボタン系に設置して、単純にサブミットされた件数を取得するもよし、そのサブミットボタンに紐付かせてCookieを操作したり、Cookieデータに値を追加したりと色んな使い方が予想されます。

簡単な例ですが、事前に用意したフォームサブミットリスナーで、今回もテストページのため全てのページで発火するようにしておきます。

今回テストするのはこんな単純なフォームです。

ソースとしても凄く単純。
こんなソースでSubmitボタン

フォームの「Submit」ボタンが押された場合に発火するようにするのでルールとしては今回単純ですが、こんな条件に。

受け皿のGoogle Analyticsイベントとしてはカテゴリに「Click」、アクションに「formSubmit」をセットします。

実際にSubmitボタンをおすと、ちゃんとイベントが発火しました。

【参考】
Google Tag Managerに関するまとめ

【GTM - Tag】timerListener(タイマーリスナー)

タイマーリスナーは凄く単純で何ミリ秒たったらイベントを発生させるというようなものです。ページの熟読率などをみたりするのに使えます。

今回も単純にサクッとセットしてみます。
熟読率などではありえませんが、今回はテストのために1秒たったら・・・という条件にします。

このLimitという部分は何回発火させるかで、何も設定をしないとループし続けて、この条件の場合は1秒毎に発火する条件となります。

受け皿となるGoogle Analyticsのイベントは今回も簡易的に変数は使わず、イベントカテゴリを「Click」、アクションを「over 1sec」とします。

するとリアルタイムイベントとして計測されました。

【参考】
Google Tag Managerに関するまとめ

【GTM - Tag】ClickListener(クリックリスナー)

クリックリスナーは全てのクリックに対して適用されます。

例えば、今回クリックイベントをリンクも何も貼っていない、こんなページの「Warning」というテキストをクリックした場合の動きを見てみます。

ソースとしては、こんな感じです。

事前にタグとしてクリックリスナーをセットしておき、該当ページで発火するように条件づけしておきます。今回はテストページなので発火条件はAll Pagesの「{{url}}　matches RegEx .*」を使います。

あとは「gtm.click」の指定と、「element id」で「warning」を指定します。

このルールで発火するAnalyticsのイベントですが、今回は特に変数は使わずに固定値をセットしておきます。

で、その文字列をクリックすると、Analyticsのリアルタイムイベントで検出されました。

こいつを応用して、

【参考】
Google Tag Managerに関するまとめ

【GTM - Tag】Link Click Listener(リンククリックリスナー)

リンククリックリスナーはとても単純で「ページの上へ戻る」のようなリンクだったり、単純なaタグ系のリンクをクリックした場合にそれを検知します。

単純な例としては、このページの「Clear」リンクをクリックした時にイベントを発生させてAnalytics側で取得することを想定してみます。

今回ClearにはなぜかElement IDとして「play」をセットしてしまいましたが、このデータでリンククリックリスナーを使います。

事前にタグとしてリンククリックリスナーをセットしておき、該当ページで発火するように条件づけしておきます。今回はテストページなので発火条件はAll Pagesの「{{url}}　matches RegEx .*」を使います。

発動条件(ルール)をこんな感じでセットします。

受け皿としてGoogle Analytics側のイベントをセットしますが、今回は単純化して変数は使わずに、イベントのカテゴリに「Click」、Actionとして「playClick」を指定しました。

で実際に「Clear」をクリックしてみると、ちゃんと検出されました。

【参考】
Google Tag Managerに関するまとめ

【GTM - macro】1st Party Cookie(ファーストパーティークッキー)

マクロの「ファーストパーティークッキー」という項目に関しての説明です。

ファーストパーティークッキーマクロは、その指定された名称のクッキーの値を返します。

従って、当たり前ですが事前にファーストパーティークッキーが存在していることが大前提となります。

今回試してみた動きとしては、コマースサイトのサンクスページに購入した日付をクッキーとして持たせてみました。

クッキー名は「purchaseDate」

単純に値に今日日付を入れただけです。

こいつに対して、Tag Manager側でまずはマクロを適当に設定。

続いて値が取得出来ることの確認をするだけなので、Analyticsのイベントをセット。

Analytics側で確認をしてみると、ちゃんとActionでデータが取得できていることが確認できました。

このマクロ、色々応用できますね。

単純なセッションクッキーや古いですがウェブサイト上に訪問数を表示してあげたり、一意の人を特定できるデータなんかをマクロで変数として持てるため、Big DataやLTV的な見方で設定することも出来ます。

Cookie内の日付と今日日付をカスタムHTMLをつかって差分を取ってみました。

サンプルは今日日付同士なので日数は0なのですが^^;

流れとしては、ファーストパーティークッキーに入れた値をカスタムHTML側でデータとして取り出して、そこで計算。dataLayer.pushでイベントとして値を押し出して、Analyticsのイベントで受け止める。

という感じです。

もうちょっと他の利用法も検討してみたいですね。

【参考】
Google Tag Managerに関するまとめ