【YTM】イベントハンドリング-ボタンクリックの計測方法

資料請求や購入といった最終CV以外の計測方法として、用いられやすいクリック。

マイクロCVとして設定することで、より柔軟に広告運用や集客対策がやりやすくなります。

 

今回はYahoo!タグマネージャー上で、クリックのバイディングの方法を解説します。

 

■大きな作業の流れ

①イベントを設定したいページに、イベントバイディングの設定を行う

②発火させたいタグに、イベントを紐づける

 

の2構成です。

 

①イベントを設定したいページに、イベントバイディングの設定を行う

 

YTM管理画面上での設定を説明していきます。

 

 

まず通常通り、ページを追加します。

今回は「テストだぜ」というページ名に対して、

イベントハンドリングの設定を行いたいと思います。

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3

 

「テストだぜ」ページをクリックして

 

【バイディング】

⇒【イベントバイディング】のタブまで移動します。

 

そして水色の『イベントバイディングを追加』のボタンをクリックすると下記の入力画面がポップアップします。

%ef%bc%92%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3

 

●イベント名:任意で入力してください。

今回は、『テスト 例えばクリック』と入力しています。

 

●トリガー:「一覧」から「click」を選択します。

 

●バイディング方法:「ダイレクト」を選択します。

 

●エレメントセレクター:ここは、どの要素(アイコンだったり文字だったり画像だったり)をクリックされたときに、タグが反応するか、設定する場所です。

 

 

エレメントセレクターのscriptの書き方は2つあると考えております。(他にもあるかも)

 

★1つ目

該当ページのhtmlソースを見て、クリック対象のID属性または、class属性を入力を入力します。

ID属性の場合は、頭に「#」、class属性の場合は頭に「.」をつけて入力します。

 

 

★2つ目

そのクリックによって、遷移するリンク先で設定します。

 

例えば、正規表現で、下記のように記載すると●●●●を含むURLへリンクする要素を指定することができます。

  a[href *=’●●●●’]

 

例えば、問い合わせページ「~/contact.html」へリンクするボタンを設定するならば下記のように設定します。

a[href *=’/contact.html’]

 

【参考リンク】

 

ここまで入力して「保存」を押せば、

イベントを設定したいページに、イベントバイディングの設定を行う作業は完了です。

 

②発火させたいタグに、イベントを紐づける

今度はタグ側の設定を行っていきます。

『サービスタグ管理』へ移動し、タグの設定を通常通り行います。

%ef%bc%93%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3

 

今回は任意の「G」というタグに対して、バイディングを行います。

 

タグ詳細の中の

「ページの設定」タブをクリック、

 

先ほど作った「テストだぜ」ページをインプットとして設定します。

 

 

 

そして「タグ実行条件」のタブへ移動、

「条件となるイベント」を追加し、

先ほど作ったイベント『テスト 例えばクリック』を紐づけます。

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a34

 

これで作業完了です。

 

正しく紐づけられていれば、

該当のクリックを行うと、

タグ側の統計のグラフに反映されてくるはずです。

 

 

もし反映されてこない場合として

考えられるケースは、Yahoo!ユニバーサルタグの設置位置が間違っていることがあります。

YTMのタグより、下部にイベントハンドリングの要素があると計測されない場合があります。

 

また、

クリックによりページ遷移をする場合、

YTMの処理が終わる前にページ遷移してしまうので

正確な数値が計測できないといった場合があったりします。

こちらはサーバー・システムの問題になるので中々対処し辛いところですが・・・。

 

 

以上、YTMのクリックによる測定方法でした。