タグの管理が劇的に楽になる「Yahoo!タグマネージャー」を設定してみた

日々増大する、タグ管理の手間とコスト

GoogleAnalytics、GoogleAdwords、Yahooスポンサードサーチ広告、YahooDisplayNetwork、ClickTale…、ざっと数えてみただけでも片手では収まらない数、しかもフォームなら入力ページと完了ページで別のタグを貼らなければならかなったり、確認するにもソースを直接見る必要があり、タグを外すにあたっていちいちHTMLソースを触る必要があるなど、タグ管理のコストは日々増すばかりです。
Web担当者のそんな悩みを一気に解決するのが、タグマネージャーです。

タグマネージャーって?

文字通り、タグを管理するための仕組みで、
1つのタグを貼っておけば、そのタグがページ毎に必要なタグを呼び出してくれるというもの。

どのタグを呼び出すかは、専用の管理画面で設定することができます。タグ毎にON/OFFもリアルタイムで可能。タグを追加したいときも、特定のタグを外したいときも管理画面で設定を変えるだけで反映できますので、いちいちHTMLを触って、あわててサーバにFTPでアップロードしたりする必要がありません。

また、タグを呼び出す条件はページのURLはもちろん、HTML内の特定の要素の有無、イベントなど、さまざまな条件で設定できます。

タグマネージャーは、Yahoo!タグマネージャーとGoogleタグマネージャーに代表されます。
今回は、Yahoo!タグマネージャーの設定についてご紹介します。

Yahoo!タグマネージャーでタグ管理を楽に、ページ表示を高速に

言うまでもなくYahoo!JAPANさんが提供するタグマネージャー。
以下、Yahoo!タグマネージャー説明サイトのトップページからの引用です。

「Yahoo!タグマネージャー」は、さまざまなタグを一元管理できるタグマネジメントサービスです。共通タグをウェブページへ埋め込むだけで複数のタグ管理を容易に行うことが可能となり、タグの導入・運用負荷の削減、ページ表示の高速化が実現できます。

タグの管理コストの削減ができるのは既に述べたとおりですが、ページ表示が高速化も図れる、と。

管理画面を開いてみよう

設定の流れを、画面をみながら追ってみたいと思います。まずは管理画面を開くところから。
※Yahoo!プロモーション広告のアカウントがあることを前提とします。

Yahooプロモーション広告にログインし「運用サポートツール」に進む

20140304_ytm1

広告運用しているアカウント名が並んでいるはずです。Yahoo!タグマネージャーを使ったことがないアカウントだと「設定」になっていると思います。

タグマネージャーを使用したいアカウントの「設定」をクリックしましょう。しばらくすると「ログイン」になるはずです。

20140304_ytm2

「ログイン」からアカウント毎の設定画面に入る。設定画面のトップはこんな感じです。

20140304_ytm3

管理画面についてですが、メニューを見てみましょう。
・サイト管理
・サービスタグ管理
・ページ管理
・データ/イベント
の4つが並んでいます。

必ず使うのは、「サービスタグ管理」と「ページ管理」です。
データ/イベントは、上級者向けと考えておいてください。

いよいよ設定を開始

流れは以下の通りです。

「サービスタグ管理」で、タグを登録

タグの登録には2種類の方法があります。

カタログに掲載されているタグの場合
Yahoo!に認定されたサービスのタグの場合、専用の設定画面が用意され、必要なパラメーターを入力すれば、タグを登録できるようになっています。

いくつか登録したところ。新規登録は、右上の青いボタン「サービスタグを追加」から。

20140304_ytm5

実は、f-traEFOのタグは、このカタログに掲載されています。
Yahoo! JAPANによって動作検証されたうえでのカタログ掲載ですから、
・他のタグとの競合がないと確認されていること
・専用の管理画面にてタグ登録が容易になること
がメリットです。

f-traEFOのタグを検索してみた

20140304_ytm6

タグの設定画面はこんな感じです。それぞれ必要なパラメーターを入力して保存します。

20140304_ytm7

カタログに掲載されていないタグの場合
一方、カタログに入っていないサービスやタグの場合は、「サービスタグを追加」の画面の一番下にある、テキストリンク「スマートカスタムタグの追加」から登録画面を開き、タグそのものを所定の入力欄にコピペして登録します。

「スマートカスタムタグの追加」リンク
20140304_ytm14

登録済みのスマートカスタムタグ。

20140304_ytm10

タグを呼び出すページを登録する

「ページ管理」で、タグを呼び出すページを登録しましょう。

20140304_ytm8

ページを登録したら、ページ毎に呼び出すタグを設定しましょう。
今回は、ページ毎にタグを設定するだけですが、データ/イベントではURLだけではなく、タグを呼び出す条件設定について、さらに、もっと細かい設定ができます。

20140304_ytm9

タグをページに貼る

最後に「ユニバーサルタグ」をサイトの各ページに貼りましょう。
これは導入時に1度行うだけ。あとは貼りっぱなしでOK。

タグ呼び出しの動作確認は、ブラウザの開発者ツールで!

導入時および設定変更時は、ユニバーサルタグが、各種タグを呼び出してくれていることを各ページで確認する必要があります。

ページのソースを見ただけでは確認できません。例えば、ブラウザ上で右クリック>「ソースを確認」では、ユニバーサルタグの存在しか確認できないのでご注意ください。

ページのソースじゃ「ユニバーサルタグ」が貼ってあることしか確認できない。
20140304_ytm11

タグマネージャーのタグ出力確認には、ブラウザの開発者ツールを使いましょう。

GoogleChromeなら、F12で開き、「Elements」タブをクリック。
出てきたDOMの要素内を開いてみるか、タグの文字列を検索して確認しましょう。例えば、f-traEFOなら「ffconf」で検索してみます。

f-traEFOのタグも確認できた(ffconf~というところ)
20140304_ytm12

これで、設定は完了です。あとは念のため翌日などに再度Yahoo!タグマネジャーの管理画面を開いてみてタグ表示の際のエラーが出ていないかをチェックしましょう。

いかがだったでしょうか。最初はおっくうかもしれませんが、一度やってみて慣れてしまえば簡単です。是非試してみましょう。

設定方法の概略は、こちらでも説明しています。
http://efo.f-tra.jp/ytm.html

Yahoo!タグマネージャー
http://tagmanager.yahoo.co.jp/

Yahoo!JAPAN提供の資料(PDF)も見てみよう。
http://tagmanager.yahoo.co.jp/download/

次回はGoogleタグマネージャーの設定をしてみる予定です。

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です