【YTM】リンククリック時に動くように、タグを設定する方法
Yahoo!タグマネージャーを使って特定のリンク先をクリックした場合にのみ、コンバージョンタグやリターゲティングタグなどを動くように設定する方法。Googleタグマネージャに比べるとちょっと手間がかかるんです(´・ω・`)
※今回も、同僚の @AQRiL_1132 の力を借りて書いています。
大まかな手順は以下の通り。
- イベントバインディングについて
- 任意のページにイベントバインディングを追加
- 特定のURLを「含む」場合
- 特定のURLから「始まる」場合(先頭一致)
- 特定のURLで「終わる」場合(末尾一致)
- 任意のタグに稼動条件を設定する
先に書いた、滞在時間を複数取得する方法に比べると全然簡単!スマホサイトで電話番号をタップした回数をコンバージョンとして設定する(簡易コールトラッキング)ときにも使える方法です。
イベントバインディングについて
イベントバインディングは、YTMのタグを設定したサイト内のマウスやキーボード、ブラウザの挙動(イベント)をYTMに紐づけることです。
Yahoo!タグマネージャーに、標準でセットされているイベントは以下の通り。
イベント名 | イベントの説明 |
---|---|
ajaxComplete | ページ内で発生したajax処理が完了した場合 |
change | 内容が変更された場合 |
click | 内容が変更された場合 |
error | エラーが発生した場合 |
focus | 指定した要素がフォーカスされた場合 |
blur | 指定した要素からフォーカスが外れた場合 |
keydown | 指定した要素にフォーカスがある時にキーが押された場合 |
keyup | 指定した要素にフォーカスがある時にキーが押されたあとに、上がった場合 |
mousedown | 指定した要素上でマウスボタンを押した場合 |
mouseup | 指定した要素上でマウスボタンを離された場合 |
mouseout | 指定した要素内からマウスカーソルが出た場合 |
mouseover | 指定した要素内にマウスカーソルが入った場合 |
scroll | スクロールした場合 |
load | すべての要素の読込が完了した場合 |
※各イベントの違いは、下記URLを参考にしてください。ブラウザによる挙動の違いもありますんで。
- 資料ダウンロード - Yahoo!タグマネージャー
- 【保存版】JavaScriptのイベント発火順序まとめ | f-labo blog
- マウスイベント | JavaScript プログラミング解説
- [JavaScript] mousedown > mouseupとclickで違うことしたい « イナヅマTVログ
イベントバインディングを設定する
イベントバインディングを追加する
今回は「クリック」したときのイベントになるので、「click」というイベントを使います。
ページ管理 > イベントを設定したいページ > イベントバインディング > イベントバインディングを追加 の順にクリック。ポップアップが表示されるので、新規作成を選択。
それぞれの項目の入力例は、次の通り。
- イベント名 ⇒ 任意(例:LinkClick_includeURL
- イベントの説明 ⇒ 任意(例:特定のURLを含む)
- トリガー ⇒ click
- バインディング方法 ⇒ ダイレクト
- エレメントセレクター ⇒ 次項参照
画像は作業順。
リンククリックを取得するためのエレメントセレクター
エレメントセレクターに下表のscriptを入力する。
●●●● には、一致方式に合わせてリンク先のURLを書いてください。
パターン | 略称 | script |
---|---|---|
特定のURLを「含む」 | 含む | a[href *='●●●●'] |
特定のURLから「始まる」 | 先頭一致 | a[href ^='●●●●'] |
特定のURLで「終わる」 | 末尾一致 | a[href $='●●●●'] |
ここで、任意のページで「リンク先URLが●●●●の箇所をクリックした」というイベントをYTMで拾うことができるようになります。仮に、全部設定するとこんな感じ。
イベントをタグに紐づける
YTMでGoogleアナリティクスを使う人は、ほぼいないでしょう。
おそらく、電話計測(tel:~)やダウンロード計測(~.pdf)のコンバージョンや、リターゲティングリストの除外用に使うことがほとんどじゃあないかと。ここでは、Googleアドワーズのリターゲティングリストを除外用に使うために、タグを稼動させるとします。
サービスタグ管理 > イベントを設定したい任意のタグ > タグ実行条件 > 条件となるイベントの追加 の順にクリック。あとは、使いたいイベントを選択して保存するだけ。
※あらかじめタグに「イベントを設定した」ページが設定されてからの手順ですので、設定されてなければタグは動きません。ご注意を~^^/
YTMは簡単だけど、手間はかかる
コンバージョンタグやリターゲティングタグの設置であれば、GTMより楽ちんです。タグカタログの量はGTMを圧倒してるので。今回のようにちょっとした応用になると、GTMのほうが楽だったりもします。GTMとYTMのどっちがいいわけではなく、それぞれメリット/デメリットはあるので、理解したうえで使いこなしていければいいんじゃなかなーとか思います。