タグ管理のススメ

_gaTracker

タグ管理のススメ

2011-8-23
eVar7代表 / サンクトガーレンCMO
清水誠

清水誠とは
1. Webビジネスに１７年
 インターネット商用開拓 1995～1999
 IA・Usability・UX 2000～2003
 アジャイル開発・XML 2003～2005
 CMS・デジタル印刷 2006～2008
 SEO・アクセス解析 2008～2010
 CRM 2011
 Int’l PM・Evangelist 2011～

2

タグ管理とは

3

最近のサイトはJSタグだらけ
 集客系
 AdWords、Yahoo!リスティング、アフィリエイト
 アクセス解析
 GA、なかのひと、SiteCatalyst、自社ツール
 マーケティング
 ABテスト、ターゲティング、LPO、問合せフォー
ム、ブログパーツ
 ソーシャル系
 Facebook、Twitter、Google+1、はてブ、mixi
4

最近のサイトはJSタグだらけ
 しかも方式がバラバラ
 <head>内と </body>前
 伝統的な同期型と最近の非同期型
 素直なJS とこっそりイロイロするJS
 全ページ共通とページごとに固有
 堅牢なものと時々壊れるもの

5

よくある課題

 管理が破綻し、カオス状態
 誰が何のためにどこに何を入れたのか？
 使っていないのにコストが発生
 いつのまにか削除された

！？

開発者制作者？

運用者マーケッター

6

よくある課題

 開発部門が動いてくれない
 変なモノを入れるな
 変更は２ヶ月後に対応
 JSは開発の責任範疇ではない

！

開発者

7

よくある課題

 パフォーマンスが落ちる
 ページの読み込みが遅くなった
 JSエラーで売上ダウン
 Cookie増えすぎてBad Requestエラー発生

8

必要なのは

 タグの一元管理と履歴管理
 どこで何をいつ使っていたのか？
 オーナーは誰か？
 方式の標準化
 ロード／実行タイミングなどのパターン化
 共通機能の集約

タグ専用のCMSが必要

9

すでに商用製品が存在する
 数年前に新興企業が参入済み
 TagMan
 Teallium
 SiteTagger 早くも落ち着いたカテゴリ
 Ensighten でもニーズは高まる一方
 BrightTag
 UberTags
 Demdex（Adobeが2011年に買収）

10

無料版は皆無
 商用化が早すぎた？
 今後ますます必要になるハズ
 使えば価値が分かるのに…

もったいないので、
作ってみました。

11

ulTracker（ウルトラッカーw）とは

 head内に1行追加するだけで各種タグに
対応できるタグ管理のためのJSファイル
 UniversaL Trackerの略
 Google Analyticsのオススメ計測入り
 国内検索エンジン対応
 サイトの速度
 離脱リンクの自動計測
 クロスドメインリンクの自動計測
 キャンペーン用パラメータの自動削除
12

導入方法その１：ga.jsの非同期だけ

1. JSをダウンロード
 http://demo.ga7.org/tag-management.html
2. GAのアカウント設定
 var _gaq = [['_setAccount','UA-XXXXXXX-X']];
3. 計測対象のドメイン指定
 var internalDomains = ‘aaa. jp,bbb. jp';
• 「,」で複数指定した場合は下記が自動設定される
• _addIgnoredRef, 他のドメイン
• _setAllowLinker, true
• _setAllowHash, false
13

導入方法その２：他のJSも

4. ロードするJSを指定

1. タイミング (0:即, 1:DOM後, 2:計測後)
2. non-SSL時のURL
3. SSL時のURL (non-SSLと同じなら省略可)

14

導入方法その３：GA離脱、Xドメインリンク

1. JSをダウンロード
• http://demo.ga7.org/tag-management.html
2. GAのアカウント設定
 var _gaq = [['_setAccount',‘XXXX'], ['_setAllowAnchor', true]];

3. 計測対象のドメイン指定
 var internalDomains = ‘aaa. jp,bbb. jp';

4. ロードするJSを指定
1. タイミング (0:即, 1:DOM後, 2:計測後)
2. non-SSL時のURL
3. SSL時のURL (non-SSLと同じなら省略可)
15

導入方法その４：Facebook、Twitter対応
5. Facebook「いいね！」対応
 App IDを指定
• FB.init({appId:‘XXXXX', status:true, cookie:true, xfbml:true});

• HTMLソース中のXFBMLの<script>タグを削除

6. Twitterボタン対応
 HTMLソース中の<script>タグを削除

16

（参考）導入済みのサイト
 サンクトガーレン
 http://www.sanktgallenbrewery.com/
 404エラーページ計測
（CMSの都合でjQueryではなくprotorype.jsを利用）

17

参考記事

 清水誠の「その指標がデザインを決める」

 そのエラーページ、自己満足になっていませんか
http://ascii.jp/elem/000/000/610/610207/

18

参考記事

 実践CMS*IA
 キャンペーン用URLパラメータは#を使えばキレイにできる
http://www.cms-ia.info/news/hash-for-campaign-tracking/
 jQueryを使って外部リンクをGAで自動計測する方法
http://www.cms-ia.info/news/automate-exit-link-tracking-with-jquery/
 タグ実装の3つのメソッド比較：headの非同期はUXに悪い?
http://www.cms-ia.info/news/asynchronous-tracking-not-always-best/

19

（参考）導入済みのサイト
 実践CMS*IA
 http://www.cms-ia.info/
 404エラーページ計測
 AddThisのクリック計測
 Facebookからの流入計測
（CMSの都合でjQueryではなくprotorype.jsを利用）

20

参考記事

 清水誠の「その指標がデザインを決める」

 Facebookの「いいね！」で売上は増えるのか？
http://ascii.jp/elem/000/000/626/626339/

21

最後に

 導入は楽をして分析しよう

 感想、ご提案お待ちしてます

22

ありがとうございました。

過去の講演資料や最新情報は下記のサイトまで

実践 CMS @mak00s

実践CMS*IA

http://www.cms-ia.info

23

タグ管理のススメ

More Related Content

タグ管理のススメ