GA4のeコマーストラッキング設定方法

1 おおいたウェブマーケティング塾 GA4のeコマーストラッキングを最⼩の⼿間で設定する⽅法

2 まえがき • Shopifyなどのシステムを使わず、⼿組みでECサイトを作っている場合、 GA4のeコマーストラッキングを⼿動で設定しなくてはいけません。 • このドキュメントはGoogleChromeにて、GTMを使ってGA4のeコマーストラッキングを、設定する⽅法について解説します。 • 解説する計測は最⼩限のみですので、返品や商品リストの閲覧などのイ
ベントは対象外です。

3 必要なもの • Google Analytics4 • Google Tag Manager •
GTMを使って全てのページでGA4のタグが発⽕し、page_viewなどのイベントが計測できていることを確認してください。 • このドキュメントでは、説明をそこからスタートします。 • GoogleChrome拡張機能（テスト⽤） • GA Debugger • Tag Assistant Companion ※Tag Assistant Legacyは古いので削除

4 最低限計測すべきイベント • 商品詳細ページの閲覧 • カートに商品を⼊れた • 決済の開始 • 決済の完了
• 決済完了ページが計測できれば、商品ごとの購⼊数や売上⾦額が計測できますので、それだけ分かれば良いという場合は、ここだけ実装するという選択もアリです。

5 購⼊ステップの進捗が分かる • 商品詳細閲覧・カートに⼊れた・決済開始も計測すると、購⼊ステップのどこで離脱されているのか（主に⾒たいのは、決済⼿続きを開始してから購⼊完了までの離脱状況）や、どの商品が多くカートに⼊れられているのかなどが計測できるようになります。

6 売れた⾦額と商品の内訳が分かる • 商品ごとに売れた数と売上⾦額が分かります。

7 商品詳細ページの閲覧イベント商品詳細ページの<head>内に、以下のコードを出⼒してください。⾚⽂字の部分を、そのページの商品の情報に置き換えてください。 dataLayer.push({ ecommerce: null }); // Clear
the previous ecommerce object. dataLayer.push({ event: "view_item", ecommerce: { currency: "JPY", value: ⾦額, items: [ { item_id: "商品コード", item_name: "商品名", affiliation: "ショップ名", item_brand: "ブランド名", item_category: "商品カテゴリ名1", item_category2: "商品カテゴリ名2", item_variant: "バリエーション", price: ⾦額, quantity: 数量 } ] } }); ↓この下にGTMのタグを出⼒

8 カートに商品を⼊れたイベントカートに商品を⼊れた時に表⽰されるページの<head>内に、以下のコードを出⼒してください。⾚⽂字の部分を、カートに⼊れたその商品の情報に置き換えてください。 dataLayer.push({ ecommerce: null }); // Clear
the previous ecommerce object. dataLayer.push({ event: "add_to_cart", ecommerce: { currency: "JPY", value: ⾦額, items: [ { item_id: "商品コード", item_name: "商品名", affiliation: "ショップ名", item_brand: "ブランド名", item_category: "商品カテゴリ名1", item_category2: "商品カテゴリ名2", item_variant: "バリエーション", price: ⾦額, quantity: 数量 } ] } }); ↓この下にGTMのタグを出⼒

9 決済の開始イベント決済の開始時に表⽰されるページの<head>内に、以下のコードを出⼒してください。⾚⽂字の部分を、カートに⼊っている商品の情報に置き換えてください。 dataLayer.push({ ecommerce: null }); // Clear
the previous ecommerce object. dataLayer.push({ event: "begin_checkout", ecommerce: { currency: "JPY", value: ⾦額, items: [ { item_id: "商品コード", item_name: "商品名", affiliation: "ショップ名", item_brand: "ブランド名", item_category: "商品カテゴリ名1", item_category2: "商品カテゴリ名2", item_variant: "バリエーション", price: ⾦額, quantity: 数量 } ] } }); ↓この下にGTMのタグを出⼒

10 決済の完了イベント決済の完了時に表⽰されるページ（いわゆる「お買い上げありがとうございました」ページ）の<head>内に、以下のコードを出⼒してください。⾚⽂字の部分を、購⼊した商品の情報に置き換えてください。 dataLayer.push({ ecommerce: null }); //
Clear the previous ecommerce object. dataLayer.push({ event: "purchase", ecommerce: { transaction_id: "伝票番号", value: 税抜き合計⾦額, tax: 消費税額, shipping: 送料, currency: "JPY", items: [ { item_id: "商品コード", item_name: "商品名", affiliation: "ショップ名", item_brand: "ブランド名", item_category: "商品カテゴリ名1", item_category2: "商品カテゴリ名2", item_variant: "バリエーション", price: ⾦額, quantity: 数量 } ] } }); ↓この下にGTMのタグを出⼒

11 商品の種類が複数の場合それぞれのイベント時に、各ページのitemsの中を、商品の種類の数だけ繰り返して出⼒してください。 2つの種類の商品を購⼊完了した場合の例を、以下に⽰します。 dataLayer.push({ ecommerce: null }); // Clear
the previous ecommerce object. dataLayer.push({ event: "begin_checkout", ecommerce: { transaction_id: "伝票番号", value: 税抜き合計⾦額, tax: 消費税額, shipping: 送料, currency: "JPY", items: [ { item_id: "商品コード", item_name: "商品名", affiliation: "ショップ名", item_brand: "ブランド名", item_category: "商品カテゴリ名1", item_category2: "商品カテゴリ名2", item_variant: "バリエーション", price: ⾦額, quantity: 数量 }, { item_id: "商品コード", item_name: "商品名", affiliation: "ショップ名", item_brand: "ブランド名", item_category: "商品カテゴリ名1", item_category2: "商品カテゴリ名2", item_variant: "バリエーション", price: ⾦額, quantity: 数量 } ] } 1種類⽬の商品 2種類⽬の商品ここにカンマが必要

12 GTMにトリガーを設定 • 4つのイベントに対応する各トリガーを、カスタムイベントで設定します。発⽕条件は⾃社HPに合わせてください

13 GTMにイベントを設定1 • 4つのイベントに対応する、各GA4イベントを設定します。

14 GTMにイベントを設定2 • 各イベントに対応するトリガーを、上記のように設定して下さい。

15 テスト • GTMのプレビュー機能とGA4のdebug viewを使ってテストします。 • 商品ページの閲覧〜購⼊完了までの各ページごとに、イベントが発⽣するのが分かります。 • レポートの「収益化」の項⽬に載るまでには24時間ほどかかりますが、
debug viewで表⽰されていれば⼤丈夫です。

GA4のeコマーストラッキング設定方法

GA4のeコマーストラッキング設定方法

株式会社シャーロック

More Decks by 株式会社シャーロック

Other Decks in Marketing & SEO

Featured

Transcript

1 おおいたウェブマーケティング塾 GA4のeコマーストラッキングを最⼩の⼿間で設定する⽅法

3 必要なもの • Google Analytics4 • Google Tag Manager •

4 最低限計測すべきイベント • 商品詳細ページの閲覧 • カートに商品を⼊れた • 決済の開始 • 決済の完了

6 売れた⾦額と商品の内訳が分かる • 商品ごとに売れた数と売上⾦額が分かります。

7 商品詳細ページの閲覧イベント商品詳細ページの<head>内に、以下のコードを出⼒してください。⾚⽂字の部分を、そのページの商品の情報に置き換えてください。 dataLayer.push({ ecommerce: null }); // Clear

9 決済の開始イベント決済の開始時に表⽰されるページの<head>内に、以下のコードを出⼒してください。⾚⽂字の部分を、カートに⼊っている商品の情報に置き換えてください。 dataLayer.push({ ecommerce: null }); // Clear

12 GTMにトリガーを設定 • 4つのイベントに対応する各トリガーを、カスタムイベントで設定します。発⽕条件は⾃社HPに合わせてください

13 GTMにイベントを設定1 • 4つのイベントに対応する、各GA4イベントを設定します。

14 GTMにイベントを設定2 • 各イベントに対応するトリガーを、上記のように設定して下さい。