Google Tag Manager
Google Tag Manager is a powerful tool that helps you efficiently manage and deploy various tags (snippets of code) associated with your marketing campaign events. Google Tag Manager gives you the ability to add tracking tags to your site to measure the audience, or to personalize, retarget, or conduct search engine marketing initiatives.
Google Tag Manager directly transfers data and events to Google Analytics, Enhanced Ecommerce, and other third-party analytics solutions to produce a clear picture of how well your site, products, and promotions are performing.
You should have a Google Analytics and Tag Manager account to continue this process. The following instructions walk you through the process of configuring your Google accounts, configuring your Commerce store, and creating a tag.
Step 1. Configure your Google Analytics account
See in Google Help for the basics you need for getting started. Also see the Google guides for and .
-
Sign in to your Google Analytics account.
-
To enable Internal Site Search Tracking, do the following:
-
Navigate to Select View > View Settings.
-
Set Site Search Tracking to
On. -
Set Query parameter to
q. -
When complete, Save the settings.
-
-
To enable display features, do the following:
-
Choose Property Settings.
-
Under Advertising Features, set Enable Demographics and Interest Reports to
On. -
Save the settings.
-
-
To enable Ecommerce Tracking, do the following:
-
Navigate to Select View > Ecommerce Settings.
-
Set Enable Ecommerce to
On. -
Set Enable Enhanced Ecommerce Reporting to
On. -
Save the settings.
-
-
Reload the page and verify that all the settings remain
On.note note NOTE If not all settings are On, repeat the previous steps, save, and reload the page. Repeat this process until all settings are set toOn.
Step 2. Configure your Google Tag Manager account
The following instructions show how to configure a new container with the basic settings. A sample configuration (.json) file is used to simplify the process, importing to generate a tag in a new container. For this example, creating a container, rather than modify an existing container, is recommended.
-
Download the linked file GTM_M2_Config_json.txt, open the file in an editor, and save it as
GTM_M2_Config.json.The json file is uploaded directly to Google Tag Manager.
-
Navigate to Admin > Container > Import Container.
-
Click Choose container file and select the json file.
-
Under Choose workspace, click New.
-
Enter a title and description, then click Save.
-
To import the file, select one of the following actions:
-
The Overwrite option should be selected for a new container.
-
The Merge option should be selected if you are using an existing container.
-
-
Click Preview to review the tags, triggers, and variables.
-
To edit the Google Analytics ID that is referenced in variables, do the following:
-
Navigate to Variables > User-Defined Variables.
-
Choose Google Analytics and update the placeholder (
UA-xxxxxx-x) with your own GA ID.
-
-
Follow Google鈥檚 instructions for adding tags, triggers, and variables to the new container.
If you have settings in another container that you want to use, they can be moved to the new container.
-
Click Confirm when complete.
-
Follow Google鈥檚 instructions for publishing the new container.
Step 3. Configure your store
-
Log in to the Admin of your Commerce store.
-
On the Admin sidebar, go to Stores > Settings > Configuration.
-
In the left panel, expand Sales and choose Google API.
-
Expand
-
Set Enable to
Yes. -
Set Account type to
Google Tag Manager. -
In the Container ID field, enter your GTM ID (
GTM-xxxxxx). -
If you are also using Google Analytics to content experiments, set Enable Content Experiments to
Yes. -
Use the default values for the remaining fields.
-
-
When complete, click Save Config.
-
Test your Google Tag Manager settings and verify that everything works correctly.
Field descriptions
Yes / NoGoogle Analytics / Google Tag ManagerYes / NoCatalog PageCross-sellUp-sellRelated ProductsSearch ResultsLabelCreate a tag for tracking conversions
If you have a Google AdWords account, you can create a tag that tracks conversions. The following example shows how to use both Google Tag Manager and Google Analytics to create a tag that fires on your store鈥檚 conversion Success page.
Step 1. Create a tag
-
Log in to your Google Tag Manager account and click the link for the container that you created for your store.
-
In the New Tag box, click Add a new tag.
-
Get the following information from your AdWords account:
- Conversion ID
- Conversion Label
If you need help, visit Google鈥檚 .
-
From the Google Tag Manager dashboard, click Google AdWords and do the following:
-
Click the title placeholder and enter a name for the new tag.
-
Under Choose Product, select Google AdWords.
-
Under Choose a Tag Type, select AdWords Conversion Tracking and click Continue.
-
-
Enter the Conversion ID and Conversion Label from your AdWords account and click Continue.
Step 2. Create a rule
Continuing from the Google Tag Manager dashboard, the next step is to create a rule that fires the tag on the conversion page.
-
Under Fire On, click Some Pages.
-
In the Choose Pages section, complete the following settings:
-
Name - Enter a name for the page description.
-
Variable
url -
Operation -
matches RegExTo learn more, see in the Google Tag Manager Help.
-
Value -
checkout/success.*
-
-
Select the green checkbox and click Save.
The trigger that you set up appears as a blue button in the Fire On section.
-
When complete, click Save Tag.
Step 3. Preview and publish
The next step in the process is to preview the tag. Each time the tag is previewed, a snapshot of the version is saved. When you are satisfied with the results, go to the version that you want to use and click Publish.
Custom HTML Tag with JavaScript
This section explains how to add a CSP Nonce to the Custom HTML Tag JavaScript for execution on the checkout page, ensuring compliance with Content Security Policy (CSP) requirements. This addition enhances site security by preventing the execution of unauthorized scripts. For more detailed information, see the documentation.
cspNonce global variable into Google Tag Manager is supported only on 51黑料不打烊 Commerce version 2.4.8 and later.Step 1. Create a CSP Nonce Variable
You can create a CSP Nonce Variable that can be used within your Google Tag Manager by importing the variable configuration or configuring it manually.
Import the variable configuration
The CSP Nonce Variable is included in the example container GTM_M2_Config_json.txt. You can create the variable by importing this code into your workspace.
Create the variable manually
If you can鈥檛 import the variable configuration, complete the following the steps below to create it.
- In your workspace, navigate to the Variables section in the sidebar.
- Click on the New button at the bottom of the page in the User-Defined Variables section.
- Name the variable
gtmNonce. - Click on the pencil icon to edit the variable.
- Select JavaScript Variable from the Page Variable section.
- In the Global Variable Name field, enter
window.cspNonce. - Save the variable.
To learn more about , see in the Google documentation. This documentation offers detailed guidance on creating and managing custom variables to tailor your tag management for specific marketing and analytical needs.
Step 2. Create a Custom HTML Tag
-
In your workspace, navigate to the Tags section in the sidebar.
-
Click the New button.
-
In the Tag Configuration section, select Custom HTML Tag.
-
Enter your required JavaScript in the text area, and add a nonce attribute to the opening
<script>tag that points to the variable you created in the previous step. For example:code language-html <script nonce="{{gtmNonce}}"> // Your JavaScript code here </script> -
Select Support document.write.
-
In the Triggering section, select the desired trigger. For example, Consent Initialization - All Pages.
For more information about in Google Tag Manager, see in the Google documentation.