日々増大する、タグ管理の手間とコスト
GoogleAnalytics、GoogleAdwords、Yahooスポンサードサーチ広告、YahooDisplayNetwork、ClickTale…、ざっと数えてみただけでも片手では収まらない数、しかもフォームなら入力ページと完了ページで別のタグを貼らなければならかなったり、確認するにもソースを直接見る必要があり、タグを外すにあたっていちいちHTMLソースを触る必要があるなど、タグ管理のコストは日々増すばかりです。
Web担当者のそんな悩みを一気に解決するのが、タグマネージャーです。
タグマネージャーって？
文字通り、タグを管理するための仕組みで、
1つのタグを貼っておけば、そのタグがページ毎に必要なタグを呼び出してくれるというもの。
どのタグを呼び出すかは、専用の管理画面で設定することができます。タグ毎にON/OFFもリアルタイムで可能。タグを追加したいときも、特定のタグを外したいときも管理画面で設定を変えるだけで反映できますので、いちいちHTMLを触って、あわててサーバにFTPでアップロードしたりする必要がありません。
また、タグを呼び出す条件はページのURLはもちろん、HTML内の特定の要素の有無、イベントなど、さまざまな条件で設定できます。
タグマネージャーは、Yahoo!タグマネージャーとGoogleタグマネージャーに代表されます。
今回は、Yahoo!タグマネージャーの設定についてご紹介します。
Yahoo!タグマネージャーでタグ管理を楽に、ページ表示を高速に
言うまでもなくYahoo!JAPANさんが提供するタグマネージャー。
以下、Yahoo!タグマネージャー説明サイトのトップページからの引用です。
タグの管理コストの削減ができるのは既に述べたとおりですが、ページ表示が高速化も図れる、と。
管理画面を開いてみよう
設定の流れを、画面をみながら追ってみたいと思います。まずは管理画面を開くところから。
※Yahoo!プロモーション広告のアカウントがあることを前提とします。
Yahooプロモーション広告にログインし「運用サポートツール」に進む
広告運用しているアカウント名が並んでいるはずです。Yahoo!タグマネージャーを使ったことがないアカウントだと「設定」になっていると思います。
タグマネージャーを使用したいアカウントの「設定」をクリックしましょう。しばらくすると「ログイン」になるはずです。
「ログイン」からアカウント毎の設定画面に入る。設定画面のトップはこんな感じです。
管理画面についてですが、メニューを見てみましょう。
・サイト管理
・サービスタグ管理
・ページ管理
・データ／イベント
の４つが並んでいます。
必ず使うのは、「サービスタグ管理」と「ページ管理」です。
データ／イベントは、上級者向けと考えておいてください。
いよいよ設定を開始
流れは以下の通りです。
「サービスタグ管理」で、タグを登録
タグの登録には２種類の方法があります。
カタログに掲載されているタグの場合
Yahoo！に認定されたサービスのタグの場合、専用の設定画面が用意され、必要なパラメーターを入力すれば、タグを登録できるようになっています。
いくつか登録したところ。新規登録は、右上の青いボタン「サービスタグを追加」から。
実は、f-traEFOのタグは、このカタログに掲載されています。
Yahoo! JAPANによって動作検証されたうえでのカタログ掲載ですから、
・他のタグとの競合がないと確認されていること
・専用の管理画面にてタグ登録が容易になること
がメリットです。
f-traEFOのタグを検索してみた
タグの設定画面はこんな感じです。それぞれ必要なパラメーターを入力して保存します。
カタログに掲載されていないタグの場合
一方、カタログに入っていないサービスやタグの場合は、「サービスタグを追加」の画面の一番下にある、テキストリンク「スマートカスタムタグの追加」から登録画面を開き、タグそのものを所定の入力欄にコピペして登録します。
「スマートカスタムタグの追加」リンク
登録済みのスマートカスタムタグ。
タグを呼び出すページを登録する
「ページ管理」で、タグを呼び出すページを登録しましょう。
ページを登録したら、ページ毎に呼び出すタグを設定しましょう。
今回は、ページ毎にタグを設定するだけですが、データ／イベントではURLだけではなく、タグを呼び出す条件設定について、さらに、もっと細かい設定ができます。
タグをページに貼る
最後に「ユニバーサルタグ」をサイトの各ページに貼りましょう。
これは導入時に1度行うだけ。あとは貼りっぱなしでOK。
タグ呼び出しの動作確認は、ブラウザの開発者ツールで！
導入時および設定変更時は、ユニバーサルタグが、各種タグを呼び出してくれていることを各ページで確認する必要があります。
ページのソースを見ただけでは確認できません。例えば、ブラウザ上で右クリック＞「ソースを確認」では、ユニバーサルタグの存在しか確認できないのでご注意ください。
ページのソースじゃ「ユニバーサルタグ」が貼ってあることしか確認できない。
タグマネージャーのタグ出力確認には、ブラウザの開発者ツールを使いましょう。
GoogleChromeなら、F12で開き、「Elements」タブをクリック。
出てきたDOMの
f-traEFOのタグも確認できた（ffconf～というところ）
これで、設定は完了です。あとは念のため翌日などに再度Yahoo!タグマネジャーの管理画面を開いてみてタグ表示の際のエラーが出ていないかをチェックしましょう。
いかがだったでしょうか。最初はおっくうかもしれませんが、一度やってみて慣れてしまえば簡単です。是非試してみましょう。
設定方法の概略は、こちらでも説明しています。
http://efo.f-tra.jp/ytm.html
Yahoo!タグマネージャー
http://tagmanager.yahoo.co.jp/
Yahoo!JAPAN提供の資料（PDF）も見てみよう。
http://tagmanager.yahoo.co.jp/download/
次回はGoogleタグマネージャーの設定をしてみる予定です。
