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.
タグマネジメントシステム     2013/02/13 浦 信将
アジェンダ   タグマネジメントシステムとは   タグマネジメントシステムの仕組み   BrightTagの使い方
タグマネジメントシステムとは   「アクセス解析ツールなどが生成するHTMLタグ」    を「管理(マネジメント)する」システムのこと    (TMS)
タグマネジメントシステムとは   アドテクの種類が増えれば増えるほどタグの種類は    増えていく   キャンペーンが増えればコンバージョンやリターゲ    ティング広告のためのセグメントタグが増えていく
タグマネジメントシステムとは   従来       タグを組み込むには開発側で作業が必要         ⇒リリースが必要、気軽に計測できない・・・   そこで       タグをサードパーティに外出しして一括管理         ⇒リ...
タグマネジメントシステムとは   ピギーバック(piggyback)をフルに利用して、タグ    管理をサーバサイドで一括管理してくれるタグマネ    ジメントがUSではいち早くカテゴリーとして成立   TagMan(米) 2004創業 2...
タグマネジメントシステムとは
タグマネジメントシステムとは   2012/10
・TagMan・ensighten・TEALIUM・BRIGHTTAG
・BRIGHTTAG・ADEBIS・ADPLAN・UNITAG・ecotag
タグマネジメントシステムの仕組み   ピギーバック(piggyback)                 ↓   ブタの背中(プロパータグ)に乗っけて他のタ    グを一緒にお届け                              ...
<Crazy Egg>        Bright Tag管理画面  <Double Click>  <Hubspot>       ・       ・       ・                              ②アクセス   ...
注意1        タグの機能にはいくつかの種類があり、その用途によって        発火すべきタイミングが異なる。        ブラウザの仕組み上、head→bodyの上から下に        処理が行われていく   画面描画開始前に...
注意2 TMSの種類(設置場所)によって、設定できるタグが制 限される(可能性がある)サーバと同期するコードをタグが実行した場合、後続の処理が待たされる(画面が白いまま)
同期するコード   document.write        jsファイルの外部読み込みに使われているケース    document.write(<script src=" + src + " type="text/javascript">...
BrightTagの使い方設立           2009年製品提供開始     2010年Location    Chicago特徴 javaScriptで実装されている 条件、データ取得など、設定にjQueryライクな記述  が可能(...
BrightTagの使い方使用手順1. 埋め込みたいタグを設定(Tags)2. タグを発火させたい画面を設定(Pages)3. 発火条件、データバインディングを設定(Data &   Events)
BrightTagの使い方   Tags           発行したいタグを定義   Pages        発行したい画面(URL)を定義Data & Events     タグ中で使う変数(Data Element)を定義    ...
BrightTagの使い方                                                       http://www.ipros.jp/product/detail/12345      Tag、Pag...
BrightTagの使い方   Tagの設定
BrightTagの使い方   BrightTagが用意しているTagから設定
BrightTagの使い方   自分でカスタムタグを作成
BrightTagの使い方   [[ 変数名 ]] でData Elementに対し、動的に値を設    定できる(Data Binding)
BrightTagの使い方   発火させたいページ(URL)を設定
BrightTagの使い方   発火したいURL、除外したいURLを記述   正規表現({}で囲む)、ワイルドカードで指定可
BrightTagの使い方   使用するData Bindings( Tag中に埋込める変数)を    設定
BrightTagの使い方   サイト内に存在するDOM、定義したグローバル変数    にアクセス可能     $(“#userName”).val() のような書き方もできる
BrightTagの使い方   PageにjavaScriptのイベントを設定可能
BrightTagの使い方   イベント発生時に、変数に値を設定
BrightTagの使い方   Pageに対して、Tagを割り当てる(Tagsページから    も設定可)
BrightTagの使い方   タグ中で使う変数、イベントの定義
BrightTagの使い方   詳細ページでは使用されているPageとTagが参照で    きる
BrightTagの使い方   Tagが発火された回数、Pageの閲覧数など簡単な数    値も見ることができます
タグマネジメントシステム
タグマネジメントシステム
Upcoming SlideShare
Loading in …5
×

タグマネジメントシステム

8,370 views

Published on

タグマネジメントシステムとは何か。BrightTagの基本的な使い方について。

Published in: Technology

タグマネジメントシステム

  1. 1. タグマネジメントシステム 2013/02/13 浦 信将
  2. 2. アジェンダ タグマネジメントシステムとは タグマネジメントシステムの仕組み BrightTagの使い方
  3. 3. タグマネジメントシステムとは 「アクセス解析ツールなどが生成するHTMLタグ」 を「管理(マネジメント)する」システムのこと (TMS)
  4. 4. タグマネジメントシステムとは アドテクの種類が増えれば増えるほどタグの種類は 増えていく キャンペーンが増えればコンバージョンやリターゲ ティング広告のためのセグメントタグが増えていく
  5. 5. タグマネジメントシステムとは 従来  タグを組み込むには開発側で作業が必要 ⇒リリースが必要、気軽に計測できない・・・ そこで  タグをサードパーティに外出しして一括管理 ⇒リリース不要。開発スキルがなくても大丈夫?
  6. 6. タグマネジメントシステムとは ピギーバック(piggyback)をフルに利用して、タグ 管理をサーバサイドで一括管理してくれるタグマネ ジメントがUSではいち早くカテゴリーとして成立 TagMan(米) 2004創業 2007サービス開始
  7. 7. タグマネジメントシステムとは
  8. 8. タグマネジメントシステムとは 2012/10
  9. 9. ・TagMan・ensighten・TEALIUM・BRIGHTTAG
  10. 10. ・BRIGHTTAG・ADEBIS・ADPLAN・UNITAG・ecotag
  11. 11. タグマネジメントシステムの仕組み ピギーバック(piggyback) ↓ ブタの背中(プロパータグ)に乗っけて他のタ グを一緒にお届け ←Crazy egg ←Doubleclick ←Hubspot ←BrightTag(プロパー) piggybackについてはこちらを参照 http://www.scaleout.jp/26905/
  12. 12. <Crazy Egg> Bright Tag管理画面 <Double Click> <Hubspot> ・ ・ ・ ②アクセス ①発行したいタグ の設定 ③Bright Tagの発火 <Bright Tag> <Crazy Egg> <Double click>Bright Tagサーバ <Hubspot> ④設定したタグを配信 ⑤タグの発火
  13. 13. 注意1 タグの機能にはいくつかの種類があり、その用途によって 発火すべきタイミングが異なる。 ブラウザの仕組み上、head→bodyの上から下に 処理が行われていく 画面描画開始前に発火⇒ <head内に設置>  A/Bテスト系(Optimizelyなど) 画面変更がユーザにわかる前に読み込む必要がある  ビーコン発信系(Google Analyticsなど) ユーザが離脱する前にアクセス数をカウントしたい その他 ⇒ <body>直後、</body>直前など  それぞれのタグのマニュアルに従ってください・・・
  14. 14. 注意2 TMSの種類(設置場所)によって、設定できるタグが制 限される(可能性がある)サーバと同期するコードをタグが実行した場合、後続の処理が待たされる(画面が白いまま)
  15. 15. 同期するコード document.write jsファイルの外部読み込みに使われているケース document.write(<script src=" + src + " type="text/javascript"></script>); hogehoge.comのサーバからレスポンスがあ るまで画面描画はストップ
  16. 16. BrightTagの使い方設立 2009年製品提供開始 2010年Location Chicago特徴 javaScriptで実装されている 条件、データ取得など、設定にjQueryライクな記述 が可能(javaScriptなら自由に使える) タグの挿入位置は指定できない(タグの中で javaScriptで実装可能⇔管理に開発スキルが必要にな る)
  17. 17. BrightTagの使い方使用手順1. 埋め込みたいタグを設定(Tags)2. タグを発火させたい画面を設定(Pages)3. 発火条件、データバインディングを設定(Data & Events)
  18. 18. BrightTagの使い方 Tags 発行したいタグを定義 Pages 発行したい画面(URL)を定義Data & Events タグ中で使う変数(Data Element)を定義 変数を設定する、タグを発行するイベントを定義
  19. 19. BrightTagの使い方 http://www.ipros.jp/product/detail/12345  Tag、Page、Data Elementの関係 Pages BrihtTag発火 www.ipros.jp**product/detail** <brighttag> Data Element [[ user_name ]]を使うPageに紐付く Data BindingsTag Element user_name DBE $(“#user_name”).val() Tags 解析タグA <div>テスト 太郎</div> <div>[[ user_name ]]</div>
  20. 20. BrightTagの使い方 Tagの設定
  21. 21. BrightTagの使い方 BrightTagが用意しているTagから設定
  22. 22. BrightTagの使い方 自分でカスタムタグを作成
  23. 23. BrightTagの使い方 [[ 変数名 ]] でData Elementに対し、動的に値を設 定できる(Data Binding)
  24. 24. BrightTagの使い方 発火させたいページ(URL)を設定
  25. 25. BrightTagの使い方 発火したいURL、除外したいURLを記述 正規表現({}で囲む)、ワイルドカードで指定可
  26. 26. BrightTagの使い方 使用するData Bindings( Tag中に埋込める変数)を 設定
  27. 27. BrightTagの使い方 サイト内に存在するDOM、定義したグローバル変数 にアクセス可能 $(“#userName”).val() のような書き方もできる
  28. 28. BrightTagの使い方 PageにjavaScriptのイベントを設定可能
  29. 29. BrightTagの使い方 イベント発生時に、変数に値を設定
  30. 30. BrightTagの使い方 Pageに対して、Tagを割り当てる(Tagsページから も設定可)
  31. 31. BrightTagの使い方 タグ中で使う変数、イベントの定義
  32. 32. BrightTagの使い方 詳細ページでは使用されているPageとTagが参照で きる
  33. 33. BrightTagの使い方 Tagが発火された回数、Pageの閲覧数など簡単な数 値も見ることができます

×