Shopify で GA4 e コマース トラッキングを設定する方法は? ステップバイステップガイド

公開: 2022-09-13
  • Google タグ マネージャー ( GTM ) を Shopify にインストールするには?
    • フェーズ 1: GTM コンテナ コードと顧客詳細スクリプトを <head> の下の theme.liquid に追加します。
    • フェーズ 2: GTM コンテナ コードと顧客詳細スクリプトをチェックアウト ページに追加します。
  • GTM でデータレイヤー変数を作成する
  • GTM で GA4 ページ ビュー タグを作成する
  • view_item と purchase をイベントとして追跡し、ユーザー スコープと製品関連の詳細を GA4 に渡します
    • フェーズ 1: Shopify に view_item データレイヤーを追加します。
    • フェーズ 2: view_item および purchase イベントの GTM トリガーを作成します。
    • フェーズ 3: GTM タグを作成します。
  • GTM レシピをダウンロード

Google タグ マネージャー ( GTM ) を Shopify にインストールするには?

フェーズ 1: GTM コンテナ コードと顧客詳細スクリプトを <head> の下の theme.liquid に追加します。

  1. Gmail アカウントにサインインします。
  2. Google タグ マネージャーに移動します。
  3. 正しいGTM アカウントを選択します。
  4. GTMコンテナ IDをクリックします。
  5. コードを <head> セクションに貼り付ける手順を含むGTM コンテナ コードの最初のスクリプトをコピーします。
  6. Shopify ストアにログインし、ナビゲーション パネルの左側にある[オンライン ストア] の下にある [テーマ] をクリックします。
  7. [アクション]ドロップダウンの下にある [コードの編集]をクリックします。
  8. レイアウトの下にあるtheme.liquidをクリックします。
  9. コピーした GTM コンテナ コード (手順 5)を、ページの <head> のできるだけ高い位置に貼り付けます。
  10. 下記の顧客詳細スクリプトをコピーして、GTM コンテナ コードの上の<head> セクションに貼り付けます。
  11. 右上隅にある theme.liquid の[保存] をクリックします。

ステップ 1: Gmail アカウントにサインインします。

ステップ 2: 次のリンクから Google タグ マネージャーに移動します: https://tagmanager.google.com/

ステップ 3: 正しい GTM アカウントを選択する

Select the correct GTM account

ステップ 4: GTM コンテナ ID をクリックします。

GTM - click on the container id

ステップ 5:コードを <head> セクションに貼り付ける手順を含む GTM コンテナ コードの最初のスクリプトをコピーします。

copy the GTM container code

ステップ 6: Shopify ストアにログインし、左側のナビゲーション パネルの[オンライン ストア] の下にある [テーマ] をクリックします。

select themes under online store

ステップ 7: [アクション] ドロップダウンの下にある [コードの編集] をクリックします。

Click on Edit code under Actions drop down

ステップ 8: レイアウトの下のtheme.liquidをクリックします。

Click on theme.liquid

ステップ 9: (ステップ 5 で) コピーした GTM コンテナ コードを、ページの <head> のできるだけ高い位置に貼り付けます。

ステップ 10: 次の顧客詳細スクリプトをコピーします。 次に、下の画像に示すように、GTM コンテナー コードの上の <head> セクションに貼り付けます。 このスクリプトは、ユーザー スコープのデータを GA4 に渡すのに役立ちます。

コピー

<スクリプト>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
{% if customer %}
userType: "メンバー",
お客様： {
id: {{ customer.id }},
lastOrder: "{{ customer.orders.first.created_at | date: '%B %d, %Y %I:%M%p' }}",
orderCount: {{ customer.orders.size }},
totalSpent: {% if customer %}{% assign total_spent = 0 %}{% for item in customer.orders %}{% assign total_spent = total_spent | プラス: item.total_net_amount %}{% endfor %}{{ total_spent | money_without_currency | remove:"," }}{% else %}""{% endif %},
タグ: {{- customer.tags | json-}}
}、
{％ そうしないと ％}
userType: "訪問者",
お客様： {
id: "",
ラストオーダー: "",
orderCount: "",
総使用量: "",
タグ: ""
}、
{% endif %}
});
</script>

User data script above the GTM code

ステップ 11: theme.liquid の右上隅にある[保存] をクリックします。

Click save on theme.liquid

素晴らしい ！！

Shopify に GTM コンテナー コードを追加する最初のフェーズが完了しました。 次に、チェックアウト ページでGTM コンテナ コード、顧客詳細スクリプト、購入データ レイヤーを追加する必要があります。

フェーズ 2: GTM コンテナ コードと顧客詳細スクリプトを追加し、購入データ レイヤーをチェックアウト ページに追加します。

  1. Shopify ストア管理画面で、左下隅にある [設定] をクリックします。
  2. チェックアウトとアカウントをクリックします
  3. 下にスクロールして、ステータス ブロックの注文の下にある [追加のスクリプト] を探します。
  4. 最初に GTM コンテナ コードを貼り付けます。 次に、次の顧客詳細スクリプトをコピーして、GTM コンテナ コードの上に貼り付けます。
  5. 次の購入データ レイヤーをコピーして、顧客詳細スクリプトと GTM コンテナー コードの間に貼り付けます。

ステップ 1: Shopify ストア管理画面で、左下隅にある [設定] をクリックします。

On Shopify admin click on Settings towards the laft hand side bottom corner

ステップ 2: [チェックアウトとアカウント] をクリックします。

Click on Checkout and accounts

ステップ 3: 下にスクロールして、ステータス ブロックの順序の下にある [追加のスクリプト] を探します。

Scroll Down and below Order Status block look for the Additional Scripts

ステップ 4: 最初に GTM コンテナ コードを貼り付けます。 次に、次の顧客詳細スクリプトをコピーして、GTM コンテナ コードの上に貼り付けます。

Paste the GTM container code first and above the GTM container code paste the customer details script

ステップ 5: 次の購入データ レイヤーをコピーして、顧客詳細スクリプトと GTM コンテナー コードの間に貼り付けます。

コピー

<script>{% if first_time_accessed %}
window.dataLayer.push({
'page_type': '購入',
'event': 'purchase', /* GTM でカスタム イベントを作成します */
'transaction_id': '{{ order.name || order.order_number }}',
'totalValue': {{ total_price | money_without_currency | remove:',' }}, // 税と配送料を含む
'subtotalValue': {{ subtotal_price | money_without_currency | 削除する：'、' }}、
'税': {{ tax_price | money_without_currency | 削除する：'、' }}、
'送料': {{ shipping_price | money_without_currency | 削除する：'、' }}、
'currency': '{{ shop.currency }}',
'payment_type': '{{ order.transactions[0].gateway }}', //オプションのパラメーター
「eコマース」: {
'checkout_currency': '{{ checkout.currency }}', 
'値': '{{ checkout.total_price | money_without_currency | remove:',' }}', // 注文合計 (全商品の価格 + 配送料)
'税金': '{{ checkout.tax_price | money_without_currency | remove:',' }}', // 税金
'送料':'{{ checkout.shipping_price | money_without_currency | remove:',' }}', // 送料
'transaction_id': '{{ transactions[0].id }}', // トランザクション ID
「アイテム」: [
{% for line_item in line_items %}
{
'item_name': '{{ line_item.product.title | replace: "'","##@@[メール保護]@##" }}'.replace("##@@[メール保護]@##", "'"), 
'item_id': '{{ line_item.sku || line_item.product.id }}',
'価格': {{ line_item.final_price | money_without_currency | 削除する：'、' }}、
'item_brand': '{{ line_item.vendor }}',
'数量': {{ line_item.quantity }},
'item_variant': '{{ line_item.variant.title }}'
}、
{% endfor %}
]
}
});
{% endif %}
</script>

ステップ 6: 右下隅にある [保存] をクリックします。

おめでとう！ Shopify に GTM コンテナー コードを正常に追加しました。 次に、GA4 ページ ビュー タグを作成する前に、引き続き GTM でデータ レイヤー変数を作成します。 ページ ビュー タグが読み込まれると、これらの変数を使用してユーザー スコープのデータを収集し、GA4 に渡すことができます。

GTM でデータレイヤー変数を作成する

  1. GTM の左側のナビゲーション パネルで [変数] をクリックします。
  2. [ユーザー定義変数] の下の [新規] をクリックします。
  3. Variable configurationの任意の場所をクリックします。
  4. [ページ変数] で [データ レイヤー変数]を選択します。
  5. データレイヤー変数名を割り当てます。
  6. 変数の名前を変更し、 [保存] をクリックします。

ステップ 1: GTM の左側のナビゲーション パネルで [変数] をクリックします。

Click on Variables on the left hand navigation panel

ステップ 2: [ユーザー定義変数] の下にある [新規] をクリックします。

Click New under User Defined Variables

ステップ 3: 変数構成の任意の場所をクリックします。

Click anywhere on Variable configuration

ステップ 4: [ページ変数] で [データ レイヤー変数] を選択します。

Select Data Layer variable under page variables

ステップ 5:データレイヤー変数名を割り当てます。

Data Layer Variable Name

ステップ 6: 変数の名前を変更し、[保存] をクリックします。

Rename the variable and click save

上記の手順に従って、以下のデータレイヤー変数を作成します。

データレイヤー変数名: 変数の名前を変更する
ユーザーID 「dlv – 顧客 – id – 変数」
customer.lastOrder 「dlv – 顧客 – lastOrder – 変数」
customer.orderCount 「dlv – 顧客 – orderCount – 変数」
顧客タグ「dlv – 顧客 – タグ – 変数」
customer.totalSpent 「dlv – 顧客 – totalSpent – 変数」
customer.userType 「dlv – 顧客 – ユーザータイプ – 変数」
イベント「dlv – イベント – 変数」

GTM で GA4 ページ ビュー タグを作成する

  1. Google アナリティクスに移動し、GA4 プロパティを選択します。 https://analytics.google.com/
  2. 左下の歯車アイコンをクリックします。
  3. プロパティ レベルのデータ ストリームをクリックします。
  4. Web ストリームを選択し、矢印 (>) をクリックします。
  5. GA4 測定 ID をコピーします。
  6. Google タグ マネージャーに移動します。 https://tagmanager.google.com/
  7. [新しいタグを追加] をクリックします。
  8. タグ構成の任意の場所をクリックします。
  9. [Google アナリティクス: GA4 構成] を選択します。
  10. 以前にコピーした GA4 測定 ID を [測定 ID] ボックスの下に貼り付けます。
  11. [設定するフィールド] で、追加行をクリックし、フィールド名とその値を追加します。
  12. [ユーザー プロパティ] で、プロパティ名と値として次を追加します。
  13. トリガーの任意の場所をクリックします。
  14. すべてのページをトリガーとして選択します。
  15. タグの名前を変更し、[保存] をクリックします。

ステップ 1: Google アナリティクスに移動し、GA4 プロパティを選択します。 https://analytics.google.com/

ステップ 2: 左下の歯車アイコンをクリックします。

Click on the Gear Icon bottom left hand

ステップ 3: プロパティ レベルの下の [データ ストリーム] をクリックします。

Click on the Data Stream under property level

ステップ 4: Web ストリームを選択し、矢印 (>) をクリックします。

Select the Web Stream and click click the arrow (>)

ステップ 5: GA4 測定 ID をコピーします。

Copy the GA4 Measurement ID

ステップ 6: Google タグ マネージャーに移動します。 https://tagmanager.google.com/

ステップ 7: [新しいタグの追加] をクリックします。

Click On Add a new tag

ステップ 8: タグ構成の任意の場所をクリックします。

Click anywhere on the tag configuration

ステップ 9: [Google アナリティクス: GA4 構成] を選択します。

Select Google Analytics: GA4 Configuration

ステップ 10: 以前にコピーした GA4 測定 ID を [測定 ID] ボックスの下に貼り付けます。

Paste the previously copied GA4 Measurement ID under the "Measurement ID" Box.

ステップ 11: [設定するフィールド] の下で、[追加] 行をクリックし、次に説明するようにフィールド名とその値を追加します。

フィールド名: user_id

値: {{dlv – 顧客 – id – 変数}}

5 設定するフィールドの下にユーザー ID を追加します

ステップ 12: [ユーザー プロパティ] の下に、以下に示すようにプロパティ名と値を追加します。

プロパティ名価値
顧客ID {{dlv – 顧客 – id – 変数}}
ラストオーダー{{dlv – 顧客 – 最後の注文 – 変数}}
注文数{{dlv – 顧客 – 注文数 – 変数}}
total_spent {{dlv – 顧客 – 総支出 – 変数}}
ユーザータイプ{{dlv – 顧客 – ユーザータイプ – 変数}}

User Properties Assign Property Name and value

ステップ 13: トリガーの任意の場所をクリックします。

トリガー設定 - どこでもクリック

ステップ 14: すべてのページをトリガーとして選択します。

Select All Pages as a Trigger Type

ステップ 15: タグの名前を変更します。

Rename as GA4 - Page View - Tag as and Click Save

素晴らしい！

これで GA4 ページ ビュー タグが作成されました。

次に、誰かが商品ページを閲覧したときに view_item イベントを追跡し、必要な詳細を GA4 に渡す方法を見てみましょう。

view_item と購入イベント データを追跡して GA4 に渡します。

Shopify に view_item データレイヤーを追加します。

  1. Shopify ストアにログインし、左側のナビゲーション パネルの [オンライン ストア] の下にある [テーマ] をクリックします。
  2. [アクション] ドロップダウンの下にある [コードの編集] をクリックします。
  3. セクションの下の main-product.liquid をクリックします。
  4. 以下の Data Layer スクリプトをコピーして貼り付けます。
  5. 右上隅にある main-product.liquid の [保存] をクリックします。

ステップ 1: Shopify ストアにログインし、左側のナビゲーション パネルの [オンライン ストア] の下にある [テーマ] をクリックします。

select themes under online store

セクション 2: [アクション] ドロップダウンの下にある [コードの編集] をクリックします。

Click on Edit code under Actions drop down

セクション 3: セクションの下の main-product.liquid をクリックします。

Click on the main-product.liquid under Sections.

ステップ 4: 以下のデータ レイヤー スクリプトをコピーして貼り付けます。

コピー

<スクリプト>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
イベント: 'view_item',
e コマース: {
項目: [{
item_name: '{{ product.title | replace: "'","##@@[メール保護]@##" }}'.replace("##@@[メール保護]@##", "'"),
item_id: "{% if product.sku %}{{ product.sku }}{% else %}{{ product.id}}{% endif %}",
price: "{{ product.price | money_without_currency | remove:',' }}",
item_brand: "{{ product.vendor | remove: "'" | remove: '"' }}",
{% product.collections %} のコレクションの場合
item_category{% not forloop.index == 1 %}{{ forloop.index }}{% endunless %}: "{{ collection.title }}",
{% endfor %}
item_variant: "{{ product.selected_or_first_available_variant.title | remove: "'" | remove: '"' }}",
数量: '1'
}]
}
});
</script>

Copy and Paste the below mentioned Data Layer script on the main-product.liquid under Sections

ステップ 5: main-product.liquid の右上隅にある [保存] をクリックします。

Click save on the main-product.liquid under Sections

view_item と purchase イベントの GTM トリガーを作成します。

  1. Google タグ マネージャーに移動します。
  2. 左側のナビゲーション パネルで [トリガー] をクリックします。
  3. [新規] をクリックします。
  4. トリガー構成の任意の場所をクリックします。
  5. [その他] で [カスタム イベント] を選択します。
  6. イベント名view_item を割り当てます。
  7. トリガーの名前をCE – EEC – view_item – Triggerに変更し、[保存] をクリックします。

ノート：

  1. イベント名を購入として割り当てる
  2. トリガーの名前をCE – EEC – purchase – Triggerに変更し、[保存] をクリックします。

ステップ 1: Google タグ マネージャーにアクセスします。

ステップ 2: 左側のナビゲーション パネルで [トリガー] をクリックします。

Click on Trigger on the left hand navigation panel

ステップ 3: [新規] をクリックします。

Click New

ステップ 4: トリガー構成の任意の場所をクリックします。

Click anywhere on Trigger configuration

ステップ 5: [その他] で [カスタム イベント] を選択します。

Select Custom Event under Other

ステップ 6: イベント名view_item を割り当てます。

Assign Event Name as view_item

ステップ 7: トリガーの名前を CE – EEC – view_item – Trigger に変更し、[保存] をクリックします。

Rename the Trigger - view_item

これらの手順で、view_item イベント トリガーを作成しました。 ここで、購入イベント トリガーを作成する必要があります。 購入イベント トリガーを作成するには、上記の最初の 5 つの手順に従います。

ステップ 8: イベント名を購入として割り当てる

custom event name purchase

ステップ 9: トリガーの名前を CE – EEC – purchase – Trigger に変更し、[保存] をクリックします。

Rename the Trigger - purchase

すべての手順に従った場合、view_item を収集し、Shopify ストアからユーザー スコープのデータを使用してイベント関連のデータを購入するためのほぼすべての操作が完了しています。 次に、Google タグ マネージャーを使用してこれらの詳細を GA4 に渡す方法を見てみましょう。

view_item と purchase イベントの GTM タグを作成します。

  1. 左側のナビゲーション パネルで [タグ] をクリックします。
  2. 新規をクリックします。
  3. タグ設定の任意の場所をクリックします。
  4. [おすすめのタグ] で [Google アナリティクス: GA4 イベント] を選択します。
  5. [構成タグ] で、ドロップダウンから [GA4 – ページ ビュー – タグ] を選択します。
  6. イベント名を割り当てます。 以前に作成した dataLayer 変数を選択します – {{dlv – event – variable}}
  7. [その他の設定] をクリックし、[e コマース] の下にある [ e コマース データの送信] を選択します。 データ ソースとして [データ レイヤー] を選択します。
  8. Trigging の任意の場所をクリックします。
  9. view_item イベントに対して、以前に作成したトリガー「CE – EEC – view_item – Trigger」を選択します。
  10. [トリガー] セクションの右上隅にカーソルを合わせ、鉛筆アイコンをクリックします。
  11. 今すぐプラスアイコンをクリックしてください。
  12. 「CE – purchase – Trigger」という名前の購入イベント トリガーを選択します。
  13. タグの名前を「GA4 – EEC event – Tag」に変更し、[保存] をクリックします。

ステップ 1: 左側のナビゲーション パネルで [タグ] をクリックします。

Click on tag on the left hand navigation panel

ステップ 2: 新規をクリックします。

Click New

ステップ 3: タグ設定の任意の場所をクリックします。

Tag Configuration - Click Anywhere

ステップ 4: [おすすめのタグ] で [Google アナリティクス: GA4 イベント] を選択します。

Select Google Analytics GA4 Event under Featured Tag

ステップ 5: [構成タグ] で、ドロップダウンから [GA4 – ページ ビュー – タグ] を選択します。

Select Configuration Tag form the drop down

ステップ 6:イベント名を割り当てます。 以前に作成したデータレイヤー変数を選択します – {{dlv – event – variable}}

Event Name Select the previously made Data Layer variable

ステップ 7: [その他の設定] をクリックし、[e コマース] の下の [ e コマース データの送信] を選択します。 データ ソースとして [データ レイヤー] を選択します。

More Settings Send eCommerce Data select Data Layer as datasource

ステップ 8: Triggering の任意の場所をクリックします。

Trigger Configuration - Click Anywhere

ステップ 9: view_item イベントに対して、以前に作成したトリガー「CE – EEC – view_item – Trigger」を選択します。

select view item trigger

ステップ 10: [トリガー] セクションの右上隅にカーソルを合わせ、鉛筆アイコンをクリックします。

Hover over the trigger towards the right hand side top corner and click on pencil icon

ステップ 11: プラス アイコンをクリックします。

Click on this plus icon

ステップ 12: 「CE – purchase – Trigger」という名前の購入イベント トリガーを選択します。

Select purchase event trigger

ステップ 13: タグの名前を「GA4 – EEC イベント – タグ」に変更し、[保存] をクリックします。

Rename the tag and click save

おめでとう

このガイドを使用すると、GA4 で商品の表示と購入のイベント データを追跡できるようになりました。 次の手順に従って、GA4 でレポートを表示することもできます。

ステップ 1: GA4 プロパティに移動します。
ステップ 2: 左側のナビゲーション パネルから [レポート] をクリックします。
ステップ 3: [収益化] をクリックしてから、[e コマースの購入] をクリックします。

このガイド用の既製の GTM コンテナーを入手したい場合は、GTM レシピをダウンロードすることを強くお勧めします。

GTM レシピをダウンロード

結論

このステップバイステップガイドでは、すべてのShopifyストアオーナーの燃えている問題に対処して解決するためにすべてのストップを引き出しました. e コマースの追跡にはさまざまなニュアンスがあり、1 つのブログ投稿で対処するのは困難です。 ご不明な点がございましたら、LinkedIn でお気軽にお問い合わせください。