Google Tag Manager

Adobe Commerceの機能 {width="20"} これは、Adobe Commerceでのみ使用できる機能であり、Magento Open Sourceでは使用できません。 (詳細情報

Google Tag Managerは、マーケティングキャンペーンイベントに関連するさまざまなタグ (コードのスニペット)を効率的に管理およびデプロイするのに役立つ強力なツールです。 Google Tag Managerを使用すると、トラッキングタグをサイトに追加してオーディエンスを測定したり、検索エンジンマーケティング施策をパーソナライズ、リターゲティング、または実施したりできます。

Google Tag Managerは、データとイベントをGoogle Analytics、拡張E コマース、その他のサードパーティ分析ソリューションに直接転送し、サイト、製品、プロモーションのパフォーマンスを明確に把握できるようにします。

このプロセスを続行するには、Google AnalyticsとTag Manager アカウントが必要です。 次の手順では、Google アカウントの設定、Commerce ストアの設定、タグの作成の手順を説明します。

NOTE
ビジネスが一般データ保護規則Google州消費者プライバシー法などのプライバシー規制の対象となる場合は、​ カリフォルニア州プライバシー設定を参照してください。

手順1: Google Analytics アカウントの設定

開始に必要な基本については、Google ヘルプの「​ サイト検索の設定」を参照してください。 Google AnalyticsおよびGoogle Tag ManagerのGoogle ガイドも参照してください。

  1. Google Analytics アカウントにログインします。

  2. Internal Site Search Tracking​を有効にするには、次の操作を行います。

    • Select View > View Settings​に移動します。

    • Site Search Tracking​をOnに設定します。

    • Query パラメーターをqに設定します。

    • 完了したら、設定を​ Save ​します。

  3. 表示機能を有効にするには、次の操作を行います。

    • Property Settings​を選択してください。

    • Advertising Features​で、Enable Demographics and Interest Reports​をOnに設定します。

    • Save​設定。

  4. E コマースのトラッキングを有効にするには、次の操作を行います。

    • Select View > Ecommerce Settings​に移動します。

    • Enable Ecommerce​をOnに設定します。

    • Enable Enhanced Ecommerce Reporting​をOnに設定します。

    • Save​設定。

  5. ページを再読み込みし、すべての設定がOnのままであることを確認します。

    note
    NOTE
    すべての設定がOnではない場合は、前の手順を繰り返し、ページを保存して再読み込みします。 すべての設定がOnに設定されるまで、このプロセスを繰り返します。

手順2: Google Tag Manager アカウントの設定

次の手順では、基本設定を使用して新しいコンテナを設定する方法を示します。 サンプル Composer設定(.json)ファイルを使用してプロセスを簡素化し、読み込んで新しいコンテナにタグを生成します。 この例では、既存のコンテナを変更するのではなく、コンテナを作成することをお勧めします。

NOTE
詳しくは、「​ コンテナの書き出しと読み込み」のGoogleを参照してください。 これらの手順では、サンプル JSONを新しいコンテナにインポートするための手順を説明します。
  1. リンクされたファイル GTM_M2_Config_json.txtをダウンロードし、エディターでファイルを開いてGTM_M2_Config.jsonとして保存します。

    json ファイルがGoogle Tag Managerに直接アップロードされます。

  2. Admin > Container > Import Container​に移動します。

  3. Choose container file​をクリックし、json ファイルを選択します。

  4. Choose workspace​で、New​をクリックします。

  5. タイトルと説明を入力し、Save​をクリックします。

  6. ファイルを読み込むには、次のいずれかの操作を選択します。

    • 新しいコンテナに対して​Overwrite オプションを選択する必要があります。

    • 既存のコンテナを使用している場合は、Merge オプションを選択する必要があります。

  7. タグ、トリガー、変数を確認するには、Preview​をクリックします。

  8. 変数で参照されている​ Google Analytics ID ​を編集するには、次の操作を行います。

    • Variables > User-Defined Variables​に移動します。

    • Google Analytics​を選択し、独自の​ GA ID ​でプレースホルダー(UA-xxxxxx-x)を更新します。

  9. 新しいコンテナにタグ、トリガーおよび変数を追加する場合は、Googleの手順に従います。

    使用する別のコンテナに設定がある場合は、新しいコンテナに移動できます。

  10. 完了したら、Confirm​をクリックします。

  11. 新しいコンテナを公開するには、Googleの手順に従います。

手順3: ストアの設定

NOTE
2.4.5 リリース以降、Google サービス統合が更新され、GTag APIの使用がサポートされるようになりました。 GTagは、web ページのGoogle機能と統合するための統合メカニズムであり、Google サービスを通じてコンテンツをトラッキングおよび管理する最新の機能と機会をサポートします。
  1. Commerce ストアの管理者にログインします。

  2. 管理者 サイドバーで、Stores > Settings>Configuration​に移動します。

  3. 左側のパネルで、Sales​を展開し、Google API​を選択します。

  4. Google Analytics セクションの 拡張セレクター を展開し、次の設定を行います。

    営業設定 – Google Analytics {width="600" modal="regular"}

    • Enable​をYesに設定します。

    • Account type​をGoogle Tag Managerに設定します。

    • Container ID フィールドにGTM ID (GTM-xxxxxx)を入力します。

    • Google Analyticsをコンテンツ実験にも使用している場合は、コンテンツ実験を有効にする​をYesに設定します。

    • 残りのフィールドにはデフォルト値を使用します。

  5. 完了したら、Save Config​をクリックします。

  6. Google Tag Manager設定をテストし、すべてが正しく機能することを確認します。

NOTE
各コンテナは1つのweb サイトに関連付けられており、アカウントごとに1つのコンテナのみが必要です。 複数サイトのCommerce インスタンスがある場合は、個別のコンテナが必要です。

フィールドの説明

フィールド
範囲
説明
Enable
ストアビュー
Google Analytics Enhanced E コマースを使用して、ストアでのアクティビティを分析できるかどうかを判断します。 オプション:Yes / No
Account type
ストアビュー
ストアのアクティビティとトラフィックのモニタリングに使用されるGoogle トラッキングコードを指定します。 オプション:Google Analytics / Google Tag Manager
Anonymize IP
ストアビュー
Google Analyticsの結果に表示されるIP アドレスから識別情報が削除されるかどうかを指定します。
Container Id
ストアビュー
Google Tag Managerが既にインストールされ、ストア用に設定されている場合、コンテナ IDはこのフィールドに自動的に表示されます。
List property for the catalog page
ストアビュー
カタログページに関連付けられているタグマネージャープロパティを識別します。 デフォルト値:Catalog Page
List property for the cross-sell block
ストアビュー
クロスセル ブロックに関連付けられているTag Manager プロパティを識別します。 デフォルト値:Cross-sell
List property for the up-sell block
ストアビュー
アップセルブロックに関連付けられているタグマネージャープロパティを識別します。 デフォルト値:Up-sell
List property for the related products block
ストアビュー
関連する製品ブロックに関連付けられているタグマネージャープロパティを識別します。 デフォルト値:Related Products
List property for the search results page
ストアビュー
検索結果ページに関連付けられているタグマネージャープロパティを識別します。 デフォルト値:Search Results
“Internal Promotions” for promotions field “Label”
ストアビュー
内部プロモーションのラベルに関連付けられているタグマネージャープロパティを識別します。 デフォルト値:Label

コンバージョンをトラッキングするためのタグの作成

Google AdWords アカウントをお持ちの場合は、コンバージョンをトラッキングするタグを作成できます。 次の例は、Google Tag ManagerとGoogle Analyticsの両方を使用して、ストアのコンバージョン 成功 ページを起動するタグを作成する方法を示しています。

手順1: タグを作成

  1. Google Tag Manager アカウントにログインし、ストア用に作成したコンテナのリンクをクリックします。

  2. New Tag ボックスで、Add a new tag​をクリックします。

  3. AdWords アカウントから次の情報を取得します。

    • コンバージョン ID
    • コンバージョンラベル

    サポートが必要な場合は、Googleの​ サポートサイト ​にアクセスしてください。

  4. Google Tag Manager ダッシュボードで、Google AdWords​をクリックし、次の操作を行います。

    • タイトルプレースホルダーをクリックし、新しいタグの名前を入力します。

    • Choose Product​で、Google AdWords​を選択します。

    • Choose a Tag Type​で「AdWords Conversion Tracking」を選択し、「Continue」をクリックします。

  5. AdWords アカウントから​ Conversion ID ​と​ Conversion Label ​を入力し、Continue​をクリックします。

手順2: ルールの作成

Google Tag Manager ダッシュボードから続く次の手順は、コンバージョンページでタグを起動するルールを作成することです。

  1. Fire On​で、Some Pages​をクリックします。

  2. Choose Pages」セクションで、次の設定を行います。

    • Name - ページの説明の名前を入力します。

    • Variable url

    • 操作 - matches RegEx

      詳しくは、Google タグマネージャーヘルプの正規表現およびCSS セレクター演算子を参照してください。

    • Value - checkout/success.*

  3. 緑のチェックボックスを選択し、Save​をクリックします。

    設定したトリガーは、「Fire On」セクションに青いボタンとして表示されます。

  4. 完了したら、Save Tag​をクリックします。

手順3: プレビューと公開

このプロセスの次の手順は、タグをプレビューすることです。 タグがプレビューされるたびに、バージョンのスナップショットが保存されます。 結果に問題がなければ、使用するバージョンに移動し、Publish​をクリックします。

JavaScriptを使用したカスタム HTML タグ

この節では、チェックアウトページで実行するカスタム HTML タグ JavaScriptにCSP Nonceを追加し、Content Security Policy (CSP)要件への準拠を確保する方法について説明します。 これにより、不正なスクリプトの実行を防止することで、サイトのセキュリティを強化できます。 詳しくは、​ コンテンツセキュリティポリシーのドキュメントを参照してください。

NOTE
Google Tag ManagerへのcspNonce グローバル変数の読み込みは、Adobe Commerce バージョン 2.4.8以降でのみサポートされています。
WARNING
ストアに不明なスクリプトを追加すると、データ侵害のリスクが生じる可能性があります。 チェックアウトページで許可されたスクリプトは、支払いの詳細などの機密性の高い顧客情報を盗む可能性があります。 Google Tag Manager アカウントを保護するために、予防策を講じることが重要です。 信頼できるスクリプトのみを追加し、タグを定期的に確認および監査し、2要素認証(2FA)やアクセス制御などの強力なセキュリティ対策を実装できます。

手順1: CSP Nonce変数の作成

Google Tag Manager内で使用できるCSP Nonce変数を作成するには、変数設定を読み込むか、手動で設定します。

変数設定のインポート

CSP Nonce変数は、サンプルコンテナ GTM_M2_Config_json.txtに含まれています。 このコードをワークスペースに読み込むことで、変数を作成できます。

変数を手動で作成する

変数設定を読み込めない場合は、次の手順を実行して作成します。

  1. ワークスペースで、サイドバーの​変数 セクションに移動します。
  2. ユーザー定義変数」セクションのページ下部にある「新規」ボタンをクリックします。
  3. 変数にgtmNonceという名前を付けます。
  4. 鉛筆アイコンをクリックして、変数を編集します。
  5. ページ変数」セクションから「JavaScript変数」を選択します。
  6. グローバル変数名」フィールドに「window.cspNonce」と入力します。
  7. 変数を保存します。

Google Tag Manager Variablesについて詳しくは、Google ドキュメントのWebのユーザー定義の変数タイプを参照してください。 このドキュメントでは、特定のマーケティングや分析のニーズに合わせてタグ管理をカスタマイズするための、カスタム変数の作成と管理に関する詳細なガイダンスを提供します。

手順2: カスタム HTML タグの作成

  1. ワークスペースで、サイドバーの​タグ セクションに移動します。

  2. 新規」ボタンをクリックします。

  3. Tag Configuration セクションで、カスタム HTML タグ​を選択します。

  4. テキスト領域に必要なJavaScriptを入力し、前の手順で作成した変数を指す開始<script> タグにnonce属性を追加します。 例:

    code language-html
    <script nonce="{{gtmNonce}}">
        // Your JavaScript code here
    </script>
    
  5. サポート document.write」を選択します。

  6. トリガー」セクションで、目的のトリガーを選択します。 例えば、同意初期化 – すべてのページ​です。

Google Tag Managerの​ タグ ​について詳しくは、Google ドキュメントの​ カスタムタグ ​を参照してください。

recommendation-more-help
commerce-admin-help-merchandising-promotions