Improve your eCommerce Game with Adobe Commerce and Google Tag Manager

As an eCommerce store owner, you always look for ways to improve your website and understand your customers better. So are you curious about the powerful tool that can help you achieve both and take your eCommerce game to the next level?

The answer lies in Google Tag manager and Adobe Commerce. With GTM, you can easily add and manage marketing and analytics tags on your website. Track conversions, set up remarketing campaigns, and gain valuable insights into customer behavior without directly editing the code. 

By using GTM in conjunction with Adobe eCommerce, you'll have greater control over your website's tracking and be able to make data-driven decisions to optimize your store for conversions and sales.

This blog will cover everything you need to know about how to install google tag manager in your Adobe Commerce site. 

What is Google Tag Manager? 

Google Tag Manager (GTM) is a free tool that allows website owners to easily add and manage marketing and analytics tags without editing the code directly. This means you can easily track conversions, set up remarketing campaigns, and get valuable insights into how customers interact with your website.

For example, imagine you have an eCommerce store and want to track how many people add items to their cart. With GTM, you can add a tracking tag to the "add to cart" button on your website without editing the code. You can then see how many people are adding items to their cart in your GTM account and use that information to make decisions about your website and marketing strategy.

GTM can be especially helpful for scaling eCommerce businesses because it allows you to make data-driven decisions and optimize your website for conversions and sales without relying on a developer to change your website's code. Additionally, it will enable you to add, test, and optimize different marketing tags and pixels from other platforms like Google Analytics, Facebook, and more, all in one place. This way, you can track and analyze all your marketing campaigns and customer behavior in one place.

What are the different types of GTM Components? 

The three main components of GTM are tags, triggers, and variables. Here's a brief overview of each one:

1. Tags: These are the snippets of code that you want to add to your website. You can add a Google Analytics tracking tag to track website visitors or a Facebook Pixel to track conversions.
2. Triggers: Some conditions need to be met for a tag to fire. For example, you might want a tag to fire only when a user clicks on a specific button or reaches a particular page.
3. Variables: These are pieces of information that GTM uses to determine when a trigger should fire. For example, you might use a variable to track the URL of the page a user is currently on, or the value of a specific form field.

Here is a scenario that illustrates how these components work together -

A user visits an e-commerce website and browses through the different product categories. Then, they decide to click on the "On Sale" button to see the items on sale. When the user clicks the "Sale" button, Google Tag Manager (GTM) checks if the trigger conditions are met. The trigger condition, in this case, is that the visitor clicked the ''On Sale' button.

Now GTM fires the corresponding tag to track button clicks on the website. The variable values that are passed to the tag include the button text, button ID, and the URL of the page that the button is on.

This information is then sent to the analytics platform, where the store owner can track the user's behavior on the website and understand which buttons are the most popular among users.

How to add a Google tag manager, and what are the different ways of integrating? 

The different approaches for integrating Adobe Commerce Google Tag Manager are manually or using plugins.

Manual integration typically involves adding GTM code snippets to the website's codebase and configuring the tags and triggers within the GTM interface. This approach gives you more control over the integration and allows you to customize the configuration to meet your needs. However, it also requires certain technical expertise and can be time-consuming.

Using plugins, on the other hand, is a more streamlined approach and typically requires less technical expertise. Adobe provides a set of plugins for different platforms (such as Magento, AEM, etc.) that allow you to easily add GTM tracking to your website. 

These plugins can automate certain integration aspects, such as adding the GTM code snippets or configuring the tags and triggers. However, the options and customization may be limited compared to manual integration.

How to create a GTM account for your Adobe eCommerce business?

1. First, go to the Google Tag Manager website https://tagmanager.google.com/ and click the "Create Account" button.
2. Next, enter your account name, country, and time zone, then click on the "Continue" button.
3. On the next page, you will be prompted to create a container. Enter a name for your container, select "Web" as the target platform, and click on the "Create" button.
4. Once your container is created, you will be presented with the GTM tracking code. Copy this code and add it to your website's HTML header.
5. Next, you will need to set up your eCommerce tracking. Go to the GTM interface and click on the "Tags" button.
6. Click on the "New" button to create a new tag. Select "Google Analytics: GA4" as the tag type and enter your GA4 tracking ID.
7. In the "Tracking ID" section, enter your GA4 tracking ID.
8. In the "Data Layer Variables" section, you need to create a data layer variable for eCommerce tracking.
9. Next, you will need to create a trigger to fire the tag on your checkout process's "Thank You" page. Click on the "Triggering" button and select "Page View" as the trigger type.
10. In the "Page Path" section, enter the URL of your "Thank You" page.
11. Finally, click the "Submit" button to save your tag and trigger, and then publish your container to make your tracking live on your website.

Note: Google Analytics 4 requires additional setup steps compared to Universal Analytics, such as setting up a Data Layer and creating Data Layer Variables in Tag Manager. Also, you can add more complex tracking and events per your requirement.

How to install the GTM code on Adobe Commerce Store?

The process involves adding the GTM code to your website's HTML head, creating a layout update XML and publishing your container. Testing your GTM implementation before going live is important to ensure everything is working correctly.

• Log in to your Adobe Commerce store's admin panel and navigate to the "System Configuration" section.
• Under the "Design" tab, click on "HTML Head" and paste the GTM tracking code in the "Miscellaneous Scripts" text field.
• Click on the "Save Config" button to save your changes.
• Next, navigate the "System" tab and select "Cache Management."
• Clear the cache by clicking on the "Flush Magento Cache" button.
• After clearing the cache, navigate to the "Design" tab and select "Layout Update XML."
• Under the "Default Handle" or the handle you are using, add the following code:

<reference name="before_body_end">_
<block type="core/template" name="google_tag_manager" template="google/analytics/google_tag_manager.phtml"/>_
</reference>

• Click on the "Save" button to save your changes.
• Go back to Google Tag Manager and publish your container.
• Test your GTM implementation using the "Preview" feature in Google Tag Manager and the GA Debugger Chrome extension.

Note: The above steps are a general guide and may vary slightly depending on your specific version of Adobe Commerce. Test your GTM implementation before going live to ensure everything is working correctly.

Adding Tags and Triggers in Google Tag Manager for Adobe Commerce

Adding tags and triggers in Google Tag Manager is important for eCommerce businesses because it allows them to track important metrics and improve their online marketing efforts.

The purpose of tags and triggers is to track specific actions or events on a website, such as product views, add-to-cart events, and purchase transactions. This data can then be used to understand customer behavior better and make informed decisions about future marketing campaigns.

When deciding when your store needs a tag or trigger for a campaign, you should consider what metrics are important for your business and which actions or events you want to track.

For example, if you are running a product promotion campaign and want to track the number of views and purchases of the promoted product, you will need to add a tag for product views and a trigger for the purchase event.

Another important aspect to consider is the customer journey and behavior; if you clearly understand how your customers interact with your website, you can create tags and triggers that will capture their behavior and help you understand the customer journey.

Here are some insights on how to add tags and triggers in Google Tag Manager:

To add tags and triggers in GTM, you will create a new tag by selecting "Google Analytics: GA4" as the tag type and entering your GA4 tracking ID.

Now, as you decide to track different events like Product Views, Add-to-Cart, and Purchase Transactions, you need to create separate data layer variables for every event. 

What is a data layer in GTM? The data layer in Google Tag Manager is a JavaScript object that stores information about a website's interactions and events. It acts as a bridge between GTM and a website, allowing GTM to access the data it needs to track specific actions and events. This information includes page views, form submissions, e-commerce transactions, and button clicks. It can also be used to create variables for customizing tags and triggers.

Then, you will create a trigger that fires the tag. 

1. For product views, the trigger would fire the tag on the product detail page by using the "Page Path" and the product detail page URL.
2. For the Add-to-Cart event, create a trigger that fires the tag when the add-to-cart button is clicked by using the "Click" trigger type and the CSS selector of the add-to-cart button.
3. And to track the purchase transactions, the trigger will fire the tag on the order confirmation page by using the "Page Path" and the URL of the order confirmation page.

Proven Troubleshooting Techniques for Optimizing GTM on Adobe Commerce Store

7 best practices, you can quickly identify and resolve any issues with your GTM implementation on your Adobe Commerce store.

1. Test your GTM implementation in preview mode before publishing: GTM provides a "Preview" feature that allows you to test your tags and triggers in a live environment. This will help you ensure that your tags and triggers are working correctly before publishing them.
2. Use the GA Debugger Chrome extension: This extension allows you to view the data being sent to Google Analytics in real time, which can help you identify any issues with your GTM implementation.
3. Check for any errors in your GTM container: GTM provides a "Debug" mode that allows you to view any errors in your container. This can help you identify issues with your tags and triggers, such as missing data layer variables.
4. Check for any conflicting tags: Conflicting tags can cause issues with your GTM implementation. Make sure to check for any conflicting tags and remove them if necessary.
5. Check for any errors in your Adobe Commerce store: Adobe Commerce stores have their error logs; check if there is any error related to the GTM setup, this can help identify any issues with your store's configuration.
6. Validate the data in GA4: Once the data flow, you should validate the data in GA4. This will help you ensure that the data is being tracked correctly.
7. Check that your GTM container is implemented correctly on all pages: Make sure your GTM container code is implemented correctly on all website pages.

FAQs

Is it better to use Google Tag Manager?

Yes, using Google Tag Manager for an eCommerce store is better. It allows for easy tracking of important metrics, efficient management of marketing tags, and improved data-driven decision-making. It also enables you to set up and manage all your marketing and analytics tags from a single interface, saving time and resources.

Is Google Tag Manager difficult to implement in Adobe Commerce?

No, implementing Google Tag Manager in Adobe Commerce is not difficult and can be easily done with the proper guidance and resources.

Do I need both GTAG and GTM in Adobe Commerce?

Although these tags have their unique features and benefits, it is not necessary to use GTAG, Google Tag Manager, and Adobe Commerce together. It ultimately depends on your specific tracking and marketing needs.