資料請求や購入といった最終CV以外の計測方法として、用いられやすいクリック。
マイクロCVとして設定することで、より柔軟に広告運用や集客対策が実施しやすくなります。
今回はYahoo!タグマネージャー上で、クリックのバイディングの方法を解説します。
- イベントを設定したいページに、イベントバイディングの設定を行う
- 発火させたいタグに、イベントを紐づける
①イベントを設定したいページに、イベントバイディングの設定を行う
YTM管理画面上での設定を説明していきます。
通常通り、ページを追加
今回は「テストだぜ」というページ名に対して、イベントハンドリングの設定を行いたいと思います。
「テストだぜ」ページをクリックして、【バイディング】⇒【イベントバイディング】のタブまで移動します。
そして水色の『イベントバイディングを追加』のボタンをクリックすると下記の入力画面がポップアップします。
- イベント名：任意で入力してください。 →今回は、『テスト 例えばクリック』と入力しています。
- トリガー：「一覧」から「click」を選択します。
- バイディング方法：「ダイレクト」を選択します。
- エレメントセレクター：ここは、どの要素（アイコンだったり文字だったり画像だったり）をクリックされたときに、タグが反応するか、設定する場所です。
エレメントセレクターの解説
エレメントセレクターのscriptの書き方は２つあります。
■1つ目 ID属性・Class属性での設定
該当ページのhtmlソースを見て、クリック対象のID属性または、Class属性を入力を入力します。
ID属性の場合は、頭に「#」、class属性の場合は頭に「.」をつけて入力します。
■2つ目 リンク先での設定
そのクリックによって、遷移するリンク先で設定します。
例えば、正規表現で、下記のように記載すると●●●●を含むURLへリンクする要素を指定することができます。
a[href *=’●●●●’]
例えば、問い合わせページ「～/contact.html」へリンクするボタンを設定するならば下記のように設定します。
a[href *=’/contact.html’]
【参考リンク】
ここまで入力して「保存」を押せば、イベントを設定したいページに、イベントバイディングの設定を行う作業は完了です。
CSSセレクタ
CSSセレクタ(単に「セレクタ」とも言う)は,HTMLの中からタグを抽出するための方法の1つです.
先ほどの例で用いたaも1つのCSSセレクタであり,これはすべての<a>タグを表します.
このようにタグ名をそのまま書くことで,指定したタグ名を持つすべてのタグを抽出できるセレクタを要素型セレクタと言います.
他にも,タグ名での絞り込みを一切行わずすべてのタグを抽出する全称セレクタや,特定のclass属性の値を持つタグを抽出するclassセレクタ,特定のid属性の値を持つタグを抽出するidセレクタなどが存在します.また,CSSセレクタは次の章で紹介するJavaScriptであったり,Googleタグマネージャにおいても要素を抽出するために使われる代表的な手法です.
そのためCSSセレクタはマーケターが理解すべき技術の1つとなります.
要素型セレクタ
要素型セレクタは,タグ名を直接指定するタイプのセレクタです.要素型セレクタを使うと,指定したタグ名を持つすべてのタグが取得できます.すべてのリンクタグを取得したい時には便利である一方で,意図しない余計なタグまで取得してしまう可能性があるため,後に紹介するidセレクタやclassセレクタ,子孫セレクタなどと組み合わせて使うケースが多いです.
idセレクタ
idセレクタでは,タグに付与されたid属性の値を用いてタグの抽出を行います.id属性の値はHTML中では重複することがないように設定されているので,idセレクタを用いて抽出を行う場合は,得られるタグは1つのみに絞り込むことができます.idセレクタは,タグ名#id名のように記述します.
またタグ名は省略することも可能であり,省略した時は#id名のように記述します.要素名と#(シャープ),id名の間にスペースを入れないように注意してください.
classセレクタ
classセレクタでは,タグに付与されたclass属性の値を用いてタグの抽出を行います.class属性の値はHTML中で重複する可能性がある点に注意しましょう.classセレクタは,タグ名.class名のように記述します.またidセレクタと同様にタグ名は省略することも可能であり,省略した時は.class名のように記述します.要素名と.(ドット),class名の間にスペースを入れないように注意してください.
②発火させたいタグに、イベントを紐づける
今度はタグ側の設定を行っていきます。
『サービスタグ管理』へ移動し、タグの設定を通常通り行います。
今回は任意の「G」というタグに対して、バイディングを行います。
タグ詳細の中の「ページの設定」タブをクリック、先ほど作った「テストだぜ」ページをインプットとして設定します。
そして「タグ実行条件」のタブへ移動、「条件となるイベント」を追加し、先ほど作ったイベント『テスト 例えばクリック』を紐づけます。
これで作業完了です。
正しく紐づけられていれば、該当のクリックを行うと、タグ側の統計のグラフに反映されてくるはずです。
うまくいかないケース
最も多いケースは、Yahoo!ユニバーサルタグの設置位置が間違っていることです。
YTMのタグより、下部にイベントハンドリングの要素があると計測されない場合があります。
また、クリックによりページ遷移をする場合、YTMの処理が終わる前にページ遷移してしまうので
正確な数値が計測できないといった場合があったりします。こちらはサーバー・システムの問題になるので中々対処し辛いところではあります。
本記事で記載したのはタグマネのほんの一部の設定ですが、包括的に学びたい方には下記の書籍がおすすめです。
ポチップ
脱線しますが、エレメントセレクターの理解につながる書籍『Webマーケターのためのテクノロジー入門』の紹介です。WEBマーケター必読の内容だと思います。
今回は『Webマーケターのためのテクノロジー入門』の第4章CSSから抜粋します。詳しくは実際に購入し読んでみてください。