Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

タグ管理のススメ

7,149 views

Published on

アクセス解析やTwitter、Facebookなど増え続けるタグを一元管理することの提案と、施策した無料JSライブラリの紹介。2011-08-24の_gaTrackerで発表した資料です。

Published in: Technology

タグ管理のススメ

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

×