タグ管理のススメ

_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

タグ管理のススメ

タグ管理のススメ

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(6)

Similar to タグ管理のススメ

Similar to タグ管理のススメ(20)

More from Makoto Shimizu

More from Makoto Shimizu(14)

Recently uploaded

Recently uploaded(12)

タグ管理のススメ