Google Tag Manager
Google Tag Managerは、マーケティングキャンペーンイベントに関連するさまざまなタグ (コードのスニペット)を効率的に管理およびデプロイするのに役立つ強力なツールです。 Google Tag Managerを使用すると、トラッキングタグをサイトに追加してオーディエンスを測定したり、検索エンジンマーケティング施策をパーソナライズ、リターゲティング、または実施したりできます。
Google Tag Managerは、データとイベントをGoogle Analytics、拡張E コマース、その他のサードパーティ分析ソリューションに直接転送し、サイト、製品、プロモーションのパフォーマンスを明確に把握できるようにします。
このプロセスを続行するには、Google AnalyticsとTag Manager アカウントが必要です。 次の手順では、Google アカウントの設定、Commerce ストアの設定、タグの作成の手順を説明します。
手順1: Google Analytics アカウントの設定
開始に必要な基本については、Google ヘルプの「 サイト検索の設定」を参照してください。 Google AnalyticsおよびGoogle Tag ManagerのGoogle ガイドも参照してください。
-
Google Analytics アカウントにログインします。
-
Internal Site Search Trackingを有効にするには、次の操作を行います。
-
Select View > View Settingsに移動します。
-
Site Search Trackingを
Onに設定します。 -
Query パラメーターを
qに設定します。 -
完了したら、設定を Save します。
-
-
表示機能を有効にするには、次の操作を行います。
-
Property Settingsを選択してください。
-
Advertising Featuresで、Enable Demographics and Interest Reportsを
Onに設定します。 -
Save設定。
-
-
E コマースのトラッキングを有効にするには、次の操作を行います。
-
Select View > Ecommerce Settingsに移動します。
-
Enable Ecommerceを
Onに設定します。 -
Enable Enhanced Ecommerce Reportingを
Onに設定します。 -
Save設定。
-
-
ページを再読み込みし、すべての設定が
Onのままであることを確認します。note NOTE すべての設定が Onではない場合は、前の手順を繰り返し、ページを保存して再読み込みします。 すべての設定がOnに設定されるまで、このプロセスを繰り返します。
手順2: Google Tag Manager アカウントの設定
次の手順では、基本設定を使用して新しいコンテナを設定する方法を示します。 サンプル Composer設定(.json)ファイルを使用してプロセスを簡素化し、読み込んで新しいコンテナにタグを生成します。 この例では、既存のコンテナを変更するのではなく、コンテナを作成することをお勧めします。
-
リンクされたファイル GTM_M2_Config_json.txtをダウンロードし、エディターでファイルを開いて
GTM_M2_Config.jsonとして保存します。json ファイルがGoogle Tag Managerに直接アップロードされます。
-
Admin > Container > Import Containerに移動します。
-
Choose container fileをクリックし、json ファイルを選択します。
-
Choose workspaceで、Newをクリックします。
-
タイトルと説明を入力し、Saveをクリックします。
-
ファイルを読み込むには、次のいずれかの操作を選択します。
-
新しいコンテナに対してOverwrite オプションを選択する必要があります。
-
既存のコンテナを使用している場合は、Merge オプションを選択する必要があります。
-
-
タグ、トリガー、変数を確認するには、Previewをクリックします。
-
変数で参照されている Google Analytics ID を編集するには、次の操作を行います。
-
Variables > User-Defined Variablesに移動します。
-
Google Analyticsを選択し、独自の GA ID でプレースホルダー(
UA-xxxxxx-x)を更新します。
-
-
新しいコンテナにタグ、トリガーおよび変数を追加する場合は、Googleの手順に従います。
使用する別のコンテナに設定がある場合は、新しいコンテナに移動できます。
-
完了したら、Confirmをクリックします。
-
新しいコンテナを公開するには、Googleの手順に従います。
手順3: ストアの設定
-
Commerce ストアの管理者にログインします。
-
管理者 サイドバーで、Stores > Settings>Configurationに移動します。
-
左側のパネルで、Salesを展開し、Google APIを選択します。
-
Google Analytics セクションの
を展開し、次の設定を行います。
{width="600" modal="regular"}
-
Enableを
Yesに設定します。 -
Account typeを
Google Tag Managerに設定します。 -
Container ID フィールドにGTM ID (
GTM-xxxxxx)を入力します。 -
Google Analyticsをコンテンツ実験にも使用している場合は、コンテンツ実験を有効にするを
Yesに設定します。 -
残りのフィールドにはデフォルト値を使用します。
-
-
完了したら、Save Configをクリックします。
-
Google Tag Manager設定をテストし、すべてが正しく機能することを確認します。
フィールドの説明
Yes / NoGoogle Analytics / Google Tag ManagerCatalog PageCross-sellUp-sellRelated ProductsSearch ResultsLabelコンバージョンをトラッキングするためのタグの作成
Google AdWords アカウントをお持ちの場合は、コンバージョンをトラッキングするタグを作成できます。 次の例は、Google Tag ManagerとGoogle Analyticsの両方を使用して、ストアのコンバージョン 成功 ページを起動するタグを作成する方法を示しています。
手順1: タグを作成
-
Google Tag Manager アカウントにログインし、ストア用に作成したコンテナのリンクをクリックします。
-
New Tag ボックスで、Add a new tagをクリックします。
-
AdWords アカウントから次の情報を取得します。
- コンバージョン ID
- コンバージョンラベル
サポートが必要な場合は、Googleの サポートサイト にアクセスしてください。
-
Google Tag Manager ダッシュボードで、Google AdWordsをクリックし、次の操作を行います。
-
タイトルプレースホルダーをクリックし、新しいタグの名前を入力します。
-
Choose Productで、Google AdWordsを選択します。
-
Choose a Tag Typeで「AdWords Conversion Tracking」を選択し、「Continue」をクリックします。
-
-
AdWords アカウントから Conversion ID と Conversion Label を入力し、Continueをクリックします。
手順2: ルールの作成
Google Tag Manager ダッシュボードから続く次の手順は、コンバージョンページでタグを起動するルールを作成することです。
-
Fire Onで、Some Pagesをクリックします。
-
「Choose Pages」セクションで、次の設定を行います。
-
Name - ページの説明の名前を入力します。
-
Variable
url -
操作 -
matches RegEx詳しくは、Google タグマネージャーヘルプの正規表現およびCSS セレクター演算子を参照してください。
-
Value -
checkout/success.*
-
-
緑のチェックボックスを選択し、Saveをクリックします。
設定したトリガーは、「Fire On」セクションに青いボタンとして表示されます。
-
完了したら、Save Tagをクリックします。
手順3: プレビューと公開
このプロセスの次の手順は、タグをプレビューすることです。 タグがプレビューされるたびに、バージョンのスナップショットが保存されます。 結果に問題がなければ、使用するバージョンに移動し、Publishをクリックします。
JavaScriptを使用したカスタム HTML タグ
この節では、チェックアウトページで実行するカスタム HTML タグ JavaScriptにCSP Nonceを追加し、Content Security Policy (CSP)要件への準拠を確保する方法について説明します。 これにより、不正なスクリプトの実行を防止することで、サイトのセキュリティを強化できます。 詳しくは、 コンテンツセキュリティポリシーのドキュメントを参照してください。
cspNonce グローバル変数の読み込みは、Adobe Commerce バージョン 2.4.8以降でのみサポートされています。手順1: CSP Nonce変数の作成
Google Tag Manager内で使用できるCSP Nonce変数を作成するには、変数設定を読み込むか、手動で設定します。
変数設定のインポート
CSP Nonce変数は、サンプルコンテナ GTM_M2_Config_json.txtに含まれています。 このコードをワークスペースに読み込むことで、変数を作成できます。
変数を手動で作成する
変数設定を読み込めない場合は、次の手順を実行して作成します。
- ワークスペースで、サイドバーの変数 セクションに移動します。
- 「ユーザー定義変数」セクションのページ下部にある「新規」ボタンをクリックします。
- 変数に
gtmNonceという名前を付けます。 - 鉛筆アイコンをクリックして、変数を編集します。
- 「ページ変数」セクションから「JavaScript変数」を選択します。
- 「グローバル変数名」フィールドに「
window.cspNonce」と入力します。 - 変数を保存します。
Google Tag Manager Variablesについて詳しくは、Google ドキュメントのWebのユーザー定義の変数タイプを参照してください。 このドキュメントでは、特定のマーケティングや分析のニーズに合わせてタグ管理をカスタマイズするための、カスタム変数の作成と管理に関する詳細なガイダンスを提供します。
手順2: カスタム HTML タグの作成
-
ワークスペースで、サイドバーのタグ セクションに移動します。
-
「新規」ボタンをクリックします。
-
Tag Configuration セクションで、カスタム HTML タグを選択します。
-
テキスト領域に必要なJavaScriptを入力し、前の手順で作成した変数を指す開始
<script>タグにnonce属性を追加します。 例:code language-html <script nonce="{{gtmNonce}}"> // Your JavaScript code here </script> -
「サポート document.write」を選択します。
-
「トリガー」セクションで、目的のトリガーを選択します。 例えば、同意初期化 – すべてのページです。
Google Tag Managerの タグ について詳しくは、Google ドキュメントの カスタムタグ を参照してください。