Google Tag Manager
Google Tag Manager は、マーケティングキャンペーンイベントに関連付けられた様々なタグ(コードスニペット)を効率的に管理およびデプロイするのに役立つ強力なツールです。 Google Tag Manager を使用すると、サイトにトラッキングタグを追加し、オーディエンスを測定したり、検索エンジンのマーケティング戦略をパーソナライズ、リターゲティング、実施したりできます。
Google Tag Manager は、データとイベントを Google Analytics、Enhanced Ecommerce、その他のサードパーティの分析ソリューションに直接転送して、サイト、製品、プロモーションのパフォーマンスを明確に把握します。
このプロセスを続行するには、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 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 を選択し、独自の
UA-xxxxxx-xでプレースホルダー(GA ID)を更新します。
-
-
タグ、トリガーおよび変数を新しいコンテナに追加するには、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 Tag Manager ヘルプの 正規表現と CSS セレクターの演算子 を参照してください。
-
Value -
checkout/success.*
-
-
「緑」チェックボックスをオンにして、「Save」をクリックします。
設定したトリガーは、[ 火の種 ] セクションに青いボタンとして表示されます。
-
完了したら、「Save Tag」をクリックします。
手順 3. プレビューと公開
プロセスの次の手順では、タグをプレビューします。 タグをプレビューするたびに、バージョンのスナップショットが保存されます。 結果に満足したら、使用するバージョンに移動し、[Publish] をクリックします。
JavaScriptを使用したカスタム HTML タグ
この節では、コンテンツセキュリティポリシー(CSP)の要件に準拠するために、チェックアウトページで実行するためにカスタム HTML タグJavaScriptに CSP Nonce を追加する方法について説明します。 この追加により、許可されていないスクリプトの実行が防がれ、サイトのセキュリティが強化されます。 詳しくは、 コンテンツセキュリティポリシー ドキュメントを参照してください。
cspNonce グローバル変数のGoogle Tag Manager への読み込みは、Adobe Commerce バージョン 2.4.8 以降でのみサポートされています。手順 1. CSP Nonce 変数の作成
変数設定を読み込むか手動で設定することで、Google Tag Manager 内で使用できる CSP Nonce 変数を作成できます。
変数設定の読み込み
CSP Nonce 変数は、サンプルコンテナ GTM_M2_Config_json.txt に含まれています。 このコードをワークスペースに読み込むことで、変数を作成できます。
変数を手動で作成
変数設定を読み込めない場合は、次の手順を実行して作成します。
- ワークスペースで、サイドバーの 変数 セクションに移動します。
- ページの下部にある「ユーザー定義変数」セクションの 新規 ボタンをクリックします。
- 変数に
gtmNonceという名前を付けます。 - 変数を編集するには、鉛筆アイコンをクリックします。
- 「ページ変数」セクションから 0}JavaScript変数」を選択します。
- 「グローバル変数名」フィールドに「
window.cspNonce」と入力します。 - 変数を保存します。
Google Tag Manager 変数について詳しくは Google ドキュメントの Web 用のユーザー定義変数タイプ を参照してください。 このドキュメントでは、特定のマーケティングおよび分析のニーズに合わせてタグ管理をカスタマイズするカスタム変数の作成と管理に関する詳細なガイダンスを提供します。
手順 2. カスタム HTML タグの作成
-
ワークスペースで、サイドバーの タグ セクションに移動します。
-
「新規 ボタンをクリックします。
-
「タグ設定」セクションで、「カスタム HTML タグ」を選択します。
-
テキスト領域に必要なJavaScriptを入力し、前の手順で作成した変数を指す nonce 属性を開始
<script>タグに追加します。 例:code language-html <script nonce="{{gtmNonce}}"> // Your JavaScript code here </script> -
Support document.write を選択します。
-
「トリガー」セクションで、目的のトリガーを選択します。 例えば、同意の初期化 – すべてのページ などです。
Google Tag Manager の タグ について詳しくは、Google ドキュメントの カスタムタグ を参照してください。