あるマクロの返り値に応じて特定の値をルックアップし、新しいマクロ名で扱える、条件分岐ができます。
これも使い方によっては本当に重宝します。
例えば、上の例の場合はデバッグモードがONの時とOFFの時でGoogle Analyticsのトラッキングコードを変動させています。
他のやり方としては、月の数字をJanuaryなどの文字列に変換したり、ダウンロードファイルタイプによってイベント名を替えたり。そして一番驚いたのは・・・こういうものです。
確かにマクロを指定できるのですがこれは完全に頭がこんがらがりそうな感じです。文字列がクリックされた場合はElementのタグを返して、リンクがクリックされた場合はリンクのURLを返す、Submitフォームの場合はそのSubmitされたidを返す。
確かに面白いですよね。こんな面白い使い方ができてしまうのが、このルックアップテーブルです。
【参考】
Google...
【GTM - macro】Constant String、Container Version Number、Custom Event(カスタムイベント)
Constant String(定数文字列)は固定値をマクロに入れておくだけの箱です。
Analyticsコードや、カスタムHTMLなどの中にif文で分岐させて、特定の条件を満たした時だけ固定値を埋める。その他ルールで条件を指定しても良いかもしれません。
他にもDOM操作とともにinnerHTMLを操作するとか、Analyticsのイベントラベルに埋め込むとか。単なる箱といえばそれまでですが、システムリリースを待たずにサクッとリリースしてしまうという点ではとても良いですね。
Container...
【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...
【GTM - macro】Auto-Event Variable(オートイベント変数) - Element系
オートイベント変数のElement系では以下の変数タイプについて説明します。
・Element
・Element Class(イベントトラッキング用)
・Element ID(イベントトラッキング用)
・Element Target(イベントトラッキング用)
・Element Text
・Element URL(イベントトラッキング用)
まずはイベントトラッキング用のマクロが簡単なので、Element Classなど名前で一目瞭然な感じもしますが、一旦gtm.clickをしかけて中身を見てみます。
サンプルのページとしては、こんな単純なものを用意しました。
ソースはこうなっています。
ここで「test2」という部分のリンクでチェックをしてみると大体想像がつくと思います。
・Element...
【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...
【GTM - Tag】Form Submit Listener(フォームサブミットリスナー)
フォームサブミットリスナーはその名の通り、ウェブサイトに設置されているフォームでサブミットボタンが押された場合に発火させる場合利用します。
会員登録ページの登録ボタンや、サイト内検索ボタン、その他ページ内のCall To Actionボタン系に設置して、単純にサブミットされた件数を取得するもよし、そのサブミットボタンに紐付かせてCookieを操作したり、Cookieデータに値を追加したりと色んな使い方が予想されます。
簡単な例ですが、事前に用意したフォームサブミットリスナーで、今回もテストページのため全てのページで発火するようにしておきます。
今回テストするのはこんな単純なフォームです。
ソースとしても凄く単純。
こんなソースでSubmitボタン
フォームの「Submit」ボタンが押された場合に発火するようにするのでルールとしては今回単純ですが、こんな条件に。
受け皿のGoogle...
【GTM - Tag】timerListener(タイマーリスナー)
タイマーリスナーは凄く単純で何ミリ秒たったらイベントを発生させるというようなものです。ページの熟読率などをみたりするのに使えます。
今回も単純にサクッとセットしてみます。
熟読率などではありえませんが、今回はテストのために1秒たったら・・・という条件にします。
このLimitという部分は何回発火させるかで、何も設定をしないとループし続けて、この条件の場合は1秒毎に発火する条件となります。
受け皿となるGoogle Analyticsのイベントは今回も簡易的に変数は使わず、イベントカテゴリを「Click」、アクションを「over...
【GTM - Tag】ClickListener(クリックリスナー)
クリックリスナーは全てのクリックに対して適用されます。
例えば、今回クリックイベントをリンクも何も貼っていない、こんなページの「Warning」というテキストをクリックした場合の動きを見てみます。
ソースとしては、こんな感じです。
事前にタグとしてクリックリスナーをセットしておき、該当ページで発火するように条件づけしておきます。今回はテストページなので発火条件はAll Pagesの「{{url}} matches RegEx .*」を使います。
あとは「gtm.click」の指定と、「element...
【GTM - Tag】Link Click Listener(リンククリックリスナー)
リンククリックリスナーはとても単純で「ページの上へ戻る」のようなリンクだったり、単純なaタグ系のリンクをクリックした場合にそれを検知します。
単純な例としては、このページの「Clear」リンクをクリックした時にイベントを発生させてAnalytics側で取得することを想定してみます。
今回ClearにはなぜかElement IDとして「play」をセットしてしまいましたが、このデータでリンククリックリスナーを使います。
事前にタグとしてリンククリックリスナーをセットしておき、該当ページで発火するように条件づけしておきます。今回はテストページなので発火条件はAll...
【GTM - macro】1st Party Cookie(ファーストパーティークッキー)
マクロの「ファーストパーティークッキー」という項目に関しての説明です。
ファーストパーティークッキーマクロは、その指定された名称のクッキーの値を返します。従って、当たり前ですが事前にファーストパーティークッキーが存在していることが大前提となります。
今回試してみた動きとしては、コマースサイトのサンクスページに購入した日付をクッキーとして持たせてみました。
クッキー名は「purchaseDate」単純に値に今日日付を入れただけです。
こいつに対して、Tag...