前回に引き続き、タグを管理できるタグマネージャーの基礎編。Yahoo!タグマネージャー(以下YTM)での基本的な設定を、概念と具体例を含めて解説します。
Yahoo!タグマネージャーの３つの概念
Googleタグマネージャのときの、タグ、トリガー、変数に当てはめると以下のようになります。
| サービスタグ | 出力するタグを記述します。Yahoo!の場合はあらかじめ用意されている媒体が豊富なので、媒体を検索して設定する場合が多いです。 |
|---|---|
| ウェブサイト | タグを発行するURLを指定します。GTMのトリガーにあたります。 |
| セレクター、バインディング | 特定の要素を取得し、イベントやデーター取得ができます。GTMの変数にあたります。< |
具体的な設定例
前回と同様に、例えば、商品購入後に、とある「広告媒体Aのコンバージョンタグ」を、「商品購入後のページのURLに”cart/thanks”というユニークな文字列が含まれている場合」に出力する場合を考えます。
実際に管理画面で設定した場合以下のようになります。
ウェブサイトの設定
↑↑↑マウスオーバー＆スクロール(スマホは長押し)orクリック↑↑↑
上の動画のように、まず左のメニューからウェブサイトをクリック、ページを追加をクリックします。
「URLパターン」項目に「example.com(ドメイン名)**cart/thanks*」と入力します。ページ名のところに適当な名前を付けて保存をクリックします。
サービスタグの設定
↑↑↑マウスオーバー＆スクロール(スマホは長押し)orクリック↑↑↑
次に、上の動画のように、左メニューからサービスタグ管理をクリック、サービスタグを追加をクリックすると、タグを検索できる画面になるので、サービス名を入力します。今回はYahoo!スポンサードサーチを選んでみます。
必要情報を入力して「サービスタグを保存を」押すと、「(先ほどつけたタグ名)のインプットを設定」という画面になり、先ほど設定したウェブサイトがリストにあると思うので、「未設定」となっているところをクリックして「設定済み」にします。保存して次へをクリックすると、完了したサービスタグの画面になるので、右上のドロップダウンリストを「有効」にすると、タグの配信が開始されます。
特定のページURLの時に特定のタグを出力したい場合は上記の方法でできます。次は、特定の要素がクリックされた場合を考えます。
具体的な設定例2(ページのURLが変わらない場合のコンバージョン測定方法-クリックイベントバインディングを使用)
ここでも前回と同様に、URLが変わらないため、クリックされたボタンのテキストが「確認」の場合にコンバージョンタグを出力する場合を考えます。
ウェブサイトの設定(イベントの作成)
↑↑↑マウスオーバー＆スクロール(スマホは長押し)orクリック↑↑↑
先ほどURLでサンクスページの設定をしましたが、URLに加えてイベントを条件に追加する必要があります。タブに左側から2番目の「バインディング」を選択し、「イベントバインディングを追加」をクリックします。トリガーのところを右側の一覧を押して、「click」を選択しエレメントセレクタに、クラス名かID名を入力します。
※GTMで解説したときのクリックされた要素が、『text属性(要素内の文)が「購入」と一致するbutton要素』だった場合はややこしいのでここでは割愛します。できるだけ、要素にIDをつけるようにしてください。(また上級編で解説するかも。)
aタグのhrefであればXPathっぽい記述で取得できます。
サービスタグの設定
↑↑↑マウスオーバー＆スクロール(スマホは長押し)orクリック↑↑↑
上の動画のように、出力したいサービスタグに移動し、「タグの実行条件」というタブに移動、「条件となるイベントの追加」をクリックして先ほど作成したイベントを選択します。これで、設定した条件のクリック時のみにタグが出力されるようになります。
コンバージョンタグの出力程度であれば、ページURLとクリックイベントでほぼ賄えると思います。（あと特定の文字列(条件)の要素が出現する条件）
さらに、YTMで動的な情報を取得するなどもGTMと同様にできます。でぶててのWEB録のでぶててさんの記事がとても詳しいです。
GoogleとYahoo!それぞれのタグマネージャーを基礎～ちょっと応用編までを解説しました。さらにEFO(入力フォーム最適化)なんかも、タグマネを使うと可能になりますので、上級編としてまた記事を書きたいと思います。
