スライド 1

Size: px

Start display at page:

Download "スライド 1"

くにもととこたに
5 years ago
Views:

1 Web サイトへの Google タグマネージャ実装指示書本資料はマイナビ出版デジタルマーケターと Web 担当者のための Google&Yahoo! タグマネージャーの教科書の購入者に対する特典として提供される GTM 実装指示書のサンプルです本資料では架空の EC サイトにおけるタグ実装例を解説しますイメージとして Google タグマネージャ実装のデモサイトの画面を掲載していますがデモサイトの機能と本資料の解説は異なります作成者は本資料の情報資料の正確性には注意を払っておりますが掲載された情報の内容の正確性については一切保証しませんまた本資料を利用に関連して生じたあらゆる損害等について作成者およびマイナビ出版では一切責任を負いません作成者 : 海老澤澄夫作成日 : 2016 年 12 月 19 日バージョン : 1.0.0

2 . はじめに本資料では Web サイトにおける Google タグマネージャ ( 以下 GTM と呼称 ) への実装作業について解説します本資料をご覧になる場合には GTM に関する次のドキュメントをお読みいただくことを推奨します Google タグマネージャヘルプセンター Google Tag Manager Google Developers( 英語 ) 本資料は対象サイトを表面的に観察した状態で記述されています技術的要因により本資料の指示通りに実装できない場合には本資料の作成者まで報告願います GTM や datalayer が本資料通りに実装されていない場合の不具合 ( 計測不備動作不良 ) については責任を負いかねます本資料では次の事柄について解説しておりません GTM の設定や使い方 JavaScript やサーバサイド技術など GTM 実装に必要な Web 開発の基礎知識対象サイト以外への実装 Google アナリティクス DoubleClick Google AdWords など連携先サービスでの設定操作その他本資料の目的に沿わない事柄 -2-

3 1. GTM と datalayer の役割 1.1. Google タグマネージャ (GTM) の目的今般のアクセス解析ツール広告効果検証ツールではタグやトラッキングコードと呼ばれる HTML タグ JavaScript を計測対象の Web サイトに実装 ( 挿入 ) することが求められその数が増えるたびにタグの全体把握や管理が困難になってきます Google タグマネージャ (GTM) は複数のタグを効率的に管理するためのツールです GTM が発行するタグを 1 種類だけ実装しておけば GTM の管理画面を通じてタグの追加削除が簡単に行えますタグを変更するたびに HTML ファイルを修正する必要はありません GTM は JavaScritp 上で機能するため HTML の内容 URL/ 参照元 /Cookie 等の情報ユーザーの環境など JavaScript がアクセスできる情報を活用して計測サーバに送信します 1.2. GTM の動作イメージ Web サーバユーザー GTM サーバ各種計測サーバタグの設定情報インターネット 1. ユーザーはWebサーバにコンテンツを要求する 2. Webサーバは GTMのタグの実装されたコンテンツ (HTML) を配信する 3. ユーザーのWebブラウザは GTMサーバにタグを要求する 4. GTMタグサーバは登録されたタグの設定情報に基づいて計測に必要なタグを配信する 5. ユーザーのWebブラウザは配信されたタグによって計測に必要な情報を各種計測サーバに送信する -3-

4 1. GTM と datalayer の役割 1.3. GTM タグの実装 GTM を利用する場合 GTM の管理画面から GTM タグを取得し <body> 直下に配置します  <noscript><iframe src="// height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> (function(w,d,s,l,i){w[l]=w[l] [];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js');var f=d.getelementsbytagname(s)[0], j=d.createelement(s),dl=l!='datalayer'?'&l='+l:'';j.async=true;j.src= '// )(window,document,'script','datalayer','gtm-xxxx');</script>  上記はイメージですこの資料から流用しても正常に動作しません 1.4. datalayer の利用 GTM には datalayer という機能を利用することで GTM が標準でアクセスできない情報を計測サーバに送信することができます datalayer をページ表示時の計測で使用する場合は JavaScript タグ内にて配列を定義した後に push メソッドで値を追加しますなお datalayer は必ず GTM タグの前に配置します 'pagecategory': 'signup', 'visitortype': 'high-value' ); </script> ページ表示後に datalayer を利用する場合は datalayer.push() メソッドを利用します 'event': 'eventname'); 下記はリンクをクリックした際に datalayer に値を指定する場合の記述例です <a href="#" onclick="'event': 'buttonclick');" >Button 1</a> datalayer の詳細は次のページを参照してください Developer Guide - Google Tag Manager Google Developers -4-

5 2. datalayer の実装内容 2.1. datalayer の実装箇所と実装の種別実装種別実装箇所ページタイプ URL 値設定のタイミングイベント名 1 トップページ toppage / ページ表示時 2 商品一覧ページ productlist /list ページ表示時 3 商品詳細ページ product_detail /item/<アイテムid> ページ表示時 3 カートへの商品投入 /item/<アイテムid> ボタンクリック時 addtocart 4 購入完了 /checkout/ ボタンクリック時 transaction 2.2. データレイヤーの書式 Google アナリティクスの E コマース計測に対応した書式でデータレイヤーを実装します実装種別 1 - トップページページタイプに toppage と指定します datalayer 名階層概要値の形式指定する値注意点 pagetype 1 ページの種類文字列 toppage "pagetype": "toppage" ); </script> -5-

6 2. datalayer の実装内容 2.4. 実装種別 2 - 商品一覧ページページタイプに productlist と指定します一覧で表示された商品の概要をその商品の数だけ指定します datalayer 名階層概要値の形式指定する値注意点 pagetype 1 ページの種類文字列 productlist ecommerce 1 E コマース情報オブジェクト impressions 2 表示する商品配列 id 3 商品番号文字列動的に値を指定 name 3 商品名文字列動的に値を指定 price 3 商品単価文字列動的に値を指定消費税は含まない brand 3 ブランド名文字列動的に値を指定 category 3 カテゴリ名文字列動的に値を指定 "pagetype" : "productlist", "ecommerce": { "impressions": [ { "id": "9bdd2", "name": "Compton T-Shirt", "price": "4400", "brand": "Compton", "category": "T-Shirts", // 商品番号 // 商品名 // 商品単価 // ブランド名 // カテゴリ名商品の数だけリピートします ( カンマで連結 ) ] ); -6-

7 2. datalayer の実装内容 2.5. 実装種別 3 - 商品詳細ページページタイプに productdetail と指定します一覧で表示された商品の一覧を指定します datalayer 名階層概要値の形式指定方法注意点 pagetype 1 ページの種類文字列 productdetail ecommerce 1 E コマース情報オブジェクト detail 2 表示する商品オブジェクト products 3 商品情報配列 id 4 商品番号文字列動的に値を指定 name 4 商品名文字列動的に値を指定 price 4 商品単価文字列動的に値を指定消費税は含まない brand 4 ブランド名文字列動的に値を指定 category 4 カテゴリ名文字列動的に値を指定 "pagetype": "productdetail", "ecommerce": { "detail": { "products": [ { "id": "9bdd2", "name": "Compton T-Shirt", "price": "4400", "brand": "Compton", "category": "T-Shirts", ] ); </script> // 商品番号 // 商品名 // 商品単価 // ブランド名 // カテゴリ名 -7-

8 2. datalayer の実装内容 2.6. 実装種別 4 - カートへの商品投入イベント名に addtocart と指定しますカートに投入された商品の一覧を指定します datalayer 名階層概要値の形式指定方法注意点 event 1 ページの種類文字列 addtocart ecommerce 1 E コマース情報オブジェクト add 2 カート投入する商品オブジェクト products 3 商品情報配列 id 4 商品番号文字列動的に値を指定 name 4 商品名文字列動的に値を指定 price 4 商品単価文字列動的に値を指定消費税は含まない brand 4 ブランド名文字列動的に値を指定 category 4 カテゴリ名文字列動的に値を指定 variant 4 商品の種類 ( サイズ ) 文字列動的に値を指定 quantity 4 カート投入点数数値動的に値を指定 "event": "addtocart", "ecommerce": { "add": { "products": [{ "id": "bc823", // 商品番号 "name": "Fuelworks T-Shirt", // 商品名 "price": "9200", // 商品単価 "brand": "Fuelworks", // ブランド名 "category": "T-Shirts", // カテゴリ名 "variant": "red", // 商品の種類 ( サイズ ) "quantity": 1 // カート投入点数 ] );</script> カート投入ボタンを押した時に上記のコードが実行される -8-

9 2. datalayer の実装内容 2.7. 実装種別 5 - 購入完了イベント名に transaction と指定します購入に関する情報と購入された商品の一覧を指定します datalayer 名階層概要値の形式指定方法注意点 event 1 ページの種類文字列 transaction ecommerce 1 E コマース情報オブジェクト purchase 2 購入に関する情報オブジェクト actionfield 3 購入情報オブジェクト id 4 購入番号文字列 affiliation 4 購入場所文字列固定値 Online Store revenue 4 購入金額数値動的に値を指定消費税発送料は含まない products 3 商品情報配列 id 4 商品番号文字列動的に値を指定 name 4 商品名文字列動的に値を指定 price 4 商品単価文字列動的に値を指定消費税は含まない brand 4 ブランド名文字列動的に値を指定 category 4 カテゴリ名文字列動的に値を指定 variant 4 商品の種類 ( サイズ ) 文字列動的に値を指定 quantity 4 購入点数数値動的に値を指定 "event": "transaction", "ecommerce": { "purchase": { "actionfield": { "id": "5bd542f6-273c-4299-bb2e-9a89647fcf9b", "affiliation": "Online Store", "revenue": 9200,, "products": [{ "id": "bc823", // 商品番号 "name": "Fuelworks T-Shirt", // 商品名 "price": "9200", // 商品単価 "brand": "Fuelworks", // ブランド名 "category": "T-Shirts", // カテゴリ名 "variant": "red", // 商品の種類 "quantity": 1 // 購入点数 ] ); </script> // 購入番号 // 購入場所 // 購入金額購入ボタンを押した時に上記のコードが実行される -9-

10 3. 改定履歴 No. 訂正日 / 訂正者訂正箇所訂正箇所 v 年 12 月 19 日海老澤澄夫初版 -10-

KDDI Smart Mobile Safety Manager Apple Business Manager(ABM) 運用マニュアル最終更新日 2019 年 4 月 25 日 Document ver1.1 (Web サイト ver.9.6.0)

KDDI Smart Mobile Safety Manager Apple Business Manager(ABM) 運用マニュアル最終更新日 2019 年 4 月 25 日 Document ver1.1 (Web サイト ver.9.6.0) 変更履歴日付 ver 変更箇所変更内容 2018/12/13 1.0 新規作成 2019/4/25 1.1 2.1.2 サーバートークンの取得 Apple