Google Tag Manager

Adobe Commerce機能 {width="20"} Adobe Commerceのみの専用機能( 詳細情報

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

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

このプロセスを続行するには、Google Analytics と Tag Manager アカウントが必要です。 以下の手順に従って、Google アカウントの設定、Commerce ストアの設定およびタグの作成を行います。

NOTE
EU 一般データ保護規則 ​​ カリフォルニア州消費者プライバシー法 ​ などのプライバシー規制の対象となるビジネスの場合は、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 TrackingOn に設定します。

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

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

  3. 表示機能を有効にするには、次の手順を実行します。

    • Property Settings」を選択します。

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

    • 設定を Save 定します。

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

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

    • Enable EcommerceOn に設定します。

    • Enable Enhanced Ecommerce ReportingOn に設定します。

    • 設定を Save 定します。

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

    note 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 を選択し、独自の UA-xxxxxx-x でプレースホルダー(GA ID)を更新します。

  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"}

    • EnableYes に設定します。

    • Account typeGoogle 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 Ecommerce を使用して、ストア内のアクティビティを分析できるかどうかを決定します。 オプション: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
ストア表示
クロスセルブロックに関連付けられたタグマネージャープロパティを識別します。 デフォルト値: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 IDConversion Label を入力し、「Continue」をクリックします。

手順 2. ルールの作成

Google Tag Manager ダッシュボードから続いて、次の手順では、コンバージョンページでタグを実行するルールを作成します。

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

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

  3. 「緑」チェックボックスをオンにして、「Save」をクリックします。

    設定したトリガーは、[ 火の種 ] セクションに青いボタンとして表示されます。

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

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

プロセスの次の手順では、タグをプレビューします。 タグをプレビューするたびに、バージョンのスナップショットが保存されます。 結果に満足したら、使用するバージョンに移動し、[Publish] をクリックします。

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

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

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

手順 1. CSP Nonce 変数の作成

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

変数設定の読み込み

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

変数を手動で作成

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

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

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

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

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

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

  3. タグ設定」セクションで、「カスタム HTML タグ」を選択します。

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

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

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

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

recommendation-more-help
d5ef48ad-708f-4ce5-a225-e7bb6053ded5