Embed Size (px)
DESCRIPTION
アクセス解析やTwitter、Facebookなど増え続けるタグを一元管理することの提案と、施策した無料JSライブラリの紹介。2011-08-24の_gaTrackerで発表した資料です。
Citation preview
タグ管理のススメ
2011-8-23eVar7代表 / サンクトガーレンCMO
清水 誠
_gaTracker
2
清水 誠とは
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～
3
タグ管理とは
4
最近のサイトはJSタグだらけ
集客系
AdWords、Yahoo!リスティング、アフィリエイト
アクセス解析
GA、なかのひと、SiteCatalyst、自社ツール
マーケティング
ABテスト、ターゲティング、LPO、問合せフォー
ム、ブログパーツ
ソーシャル系
Facebook、Twitter、Google+1、はてブ、mixi
5
最近のサイトはJSタグだらけ
しかも方式がバラバラ
<head>内 と </body>前
伝統的な同期型 と 最近の非同期型
素直なJS と こっそりイロイロするJS 全ページ共通 と ページごとに固有
堅牢なもの と 時々壊れるもの
6
よくある課題
管理が破綻し、カオス状態
誰が何のためにどこに何を入れたのか？
使っていないのにコストが発生
いつのまにか削除された
制作者開発者
マーケッター運用者
？
？！
7
よくある課題
開発部門が動いてくれない
変なモノを入れるな
変更は２ヶ月後に対応
JSは開発の責任範疇ではない
！
開発者
8
よくある課題
パフォーマンスが落ちる
ページの読み込みが遅くなった
JSエラーで売上ダウン
Cookie増えすぎてBad Requestエラー発生
9
必要なのは
タグの一元管理と履歴管理
どこで何をいつ使っていたのか？
オーナーは誰か？
方式の標準化
ロード／実行タイミングなどのパターン化
共通機能の集約
タグ専用のCMSが必要タグ専用のCMSが必要
10
すでに商用製品が存在する
数年前に新興企業が参入済み
TagMan Teallium SiteTagger Ensighten BrightTag UberTags Demdex（Adobeが2011年に買収）
早くも落ち着いたカテゴリでもニーズは高まる一方早くも落ち着いたカテゴリでもニーズは高まる一方
11
無料版は皆無
商用化が早すぎた？
今後ますます必要になるハズ
使えば価値が分かるのに…
もったいないので、作ってみました。もったいないので、作ってみました。
12
ulTracker（ウルトラッカーw）とは
head内に1行追加するだけで各種タグに
対応できるタグ管理のためのJSファイル
UniversaL Trackerの略
Google Analyticsのオススメ計測入り
国内検索エンジン対応
サイトの速度
離脱リンクの自動計測
クロスドメインリンクの自動計測
キャンペーン用パラメータの自動削除
13
導入方法その１：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
14
導入方法その２：他のJSも
4. ロードするJSを指定
1. タイミング (0:即, 1:DOM後, 2:計測後)2. non-SSL時のURL 3. SSL時のURL (non-SSLと同じなら省略可)
15
導入方法その３：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と同じなら省略可)
16
導入方法その４：Facebook、Twitter対応
5. Facebook「いいね！」対応
App IDを指定• FB.init({appId:‘XXXXX', status:true, cookie:true, xfbml:true});
• HTMLソース中のXFBMLの<script>タグを削除
6. Twitterボタン対応 HTMLソース中の<script>タグを削除
17
（参考）導入済みのサイト
サンクトガーレン http://www.sanktgallenbrewery.com/ 国内検索エンジン対応
サイトの速度
離脱リンクの自動計測
クロスドメインリンクの自動計測
キャンペーン用パラメータの自動削除
404エラーページ計測
（CMSの都合でjQueryではなくprotorype.jsを利用）
18
参考記事
清水 誠の「その指標がデザインを決める」
そのエラーページ、自己満足になっていませんかhttp://ascii.jp/elem/000/000/610/610207/
19
参考記事
実践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/
20
（参考）導入済みのサイト
実践CMS*IA http://www.cms-ia.info/ 国内検索エンジン対応
サイトの速度
離脱リンクの自動計測
クロスドメインリンクの自動計測
キャンペーン用パラメータの自動削除
404エラーページ計測
AddThisのクリック計測
Facebookからの流入計測
（CMSの都合でjQueryではなくprotorype.jsを利用）
21
参考記事
清水 誠の「その指標がデザインを決める」
Facebookの「いいね！」で売上は増えるのか？http://ascii.jp/elem/000/000/626/626339/
22
最後に
導入は楽をして分析しよう
感想、ご提案お待ちしてます
23
ありがとうございました。
過去の講演資料や最新情報は下記のサイトまで
http://www.cms-ia.info
@mak00s実践 CMS
実践CMS*IA
