Google Tag Manager (GTM) - SFCC

How to Integrate Google Tag Manager (GTM) with Salesforce Commerce Cloud

by

Imagine running an online store where you can see exactly what your customers are doing—every product they view, every item they add to their cart, and every purchase they complete. Sounds like a dream, right? Well, in 2025, this isn’t just possible—it’s easy! Thanks to tools like Google Tag Manager (GTM) and Salesforce Commerce Cloud (SFCC), you can unlock powerful insights about your e-commerce business without being a tech wizard.

In this ultimate guide, we’ll walk you through how to integrate GTM with SFCC step-by-step. We’ll explain what each tool does, how they work together, and why the dataLayer is the secret sauce that makes it all happen. Whether you’re a small business owner, a marketer, or just curious about e-commerce tracking, this article has you covered. Let’s dive in!

What Is Google Tag Manager and Salesforce Commerce Cloud?

Before we get into the nitty-gritty, let’s break down the basics.

Google Tag Manager (GTM): Your Tracking Command Center

GTM is like a superhero for managing all the tracking codes (or “tags”) on your website. Instead of hard-coding scripts for tools like Google Analytics, Google Ads, or Facebook Pixel into your site, GTM lets you add, edit, and remove them from one simple dashboard. It saves time, reduces errors, and keeps your developers happy!

Salesforce Commerce Cloud (SFCC): Your E-Commerce Powerhouse

SFCC is a top-tier platform for building and running online stores. It handles everything—product catalogs, shopping carts, checkout pages, and orders. It’s super customizable, which makes it a favorite for big brands, but it doesn’t come with built-in tracking for every marketing tool out there. That’s where GTM comes in.

Why Integrate GTM with SFCC?

When you connect GTM with SFCC, you can:

  • Track customer actions (like product views or purchases) in real-time.
  • Send data to multiple tools (Google Analytics, Ads, etc.) without changing your site’s code.
  • Understand your customers better and boost sales with data-driven decisions.

The Magic of the DataLayer: The Heart of GTM Tracking

So, how does GTM know what’s happening on your SFCC store? Enter the dataLayer—a simple JavaScript object that acts like a messenger between your website and GTM.

What Is the DataLayer?

Think of the dataLayer as a bucket. SFCC fills it with info about what’s happening—like “someone viewed a $50 jacket” or “someone just bought a pair of shoes.” GTM then grabs that info from the bucket and uses it to trigger tags. It’s the glue that holds this integration together.

Why Is It Important for E-Commerce?

In e-commerce, you want to track specific events like:

  • Product Impressions: When someone sees a product on a category page.
  • Product Views: When they click to see a product’s details.
  • Add to Cart: When they add something to their cart.
  • Purchases: When they complete an order.

The dataLayer makes sure GTM gets all these details in a structured way, so your analytics tools can make sense of them.

Step-by-Step Guide to Integrating GTM with SFCC

Ready to set this up? Here’s how to integrate GTM with SFCC in 2025. We’ll cover two approaches: using a pre-built cartridge (the easy way) and a manual setup (the custom way).

Step 1: Set Up Your GTM Account

First things first—you need a GTM account.

  1. Go to tagmanager.google.com and sign in with your Google account.
  2. Click “Create Account,” give it a name (e.g., “My SFCC Store”), and select “Web” as the target platform.
  3. Create a container (a container holds all your tags for one site). You’ll get a unique ID like GTM-XXXXXX.
  4. GTM will give you two snippets of code—one for the <head> and one for the <body> of your site. Save these; we’ll use them soon!

Step 2: Add GTM to Your SFCC Store

Now, let’s get GTM onto your SFCC pages. You’ve got two options here.

Option 1: Use a Pre-Built Cartridge (The Easy Way)

A cartridge is like a plug-and-play module for SFCC. One popular choice is the “sfcc-plugin-gtm” from Red Van Workshop (check their GitHub for the latest version).

  • How It Works:
  • Download the cartridge and upload it to your SFCC sandbox via Business Manager.
  • Go to Business Manager > Site > Site Preferences > Custom Preferences and enter your GTM Container ID (GTM-XXXXXX).
  • The cartridge automatically adds the GTM snippets to your page templates (like htmlHead.isml for the <head> and page.isml for the <body>).
  • It also starts pushing basic e-commerce data (like product views or purchases) to the dataLayer.
  • Pros: Fast setup, less coding, great for beginners.
  • Cons: Limited customization out of the box—check the cartridge’s docs to see what events it supports.

Option 2: Manual Setup (The Custom Way)

If you need full control or the cartridge doesn’t fit your needs, you can add GTM manually.

  • Edit SFCC Templates:
  • Open your SFCC codebase (e.g., via UX Studio or your IDE).
  • Add the GTM <head> snippet to app_storefront_base/cartridge/templates/default/common/htmlHead.isml (right after the opening <head> tag).
  • Add the <body> snippet to app_storefront_base/cartridge/templates/default/page.isml (right after <body>).
  • Use an <isif> condition tied to a Site Preference (e.g., gtmEnabled) so you can toggle GTM on/off in Business Manager.
  • Example Code for htmlHead.isml:
  <isif condition="${pdict.CurrentHttpParameterMap.gtmEnabled}">
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
    <!-- End Google Tag Manager -->
  </isif>
  • Pros: Total flexibility to customize.
  • Cons: Requires coding skills and more time.

Step 3: Populate the DataLayer with E-Commerce Events

GTM needs data to work with, so SFCC has to push e-commerce events into the dataLayer.

Using a Cartridge

If you’re using a cartridge like Red Van’s:

  • It automatically pushes standard events (e.g., view_item, add_to_cart, purchase) based on SFCC actions.
  • Check the cartridge’s documentation for the exact dataLayer structure it uses (it might follow Google’s Enhanced Ecommerce or GA4 format).
  • Example dataLayer push for a product view:
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'view_item',
    ecommerce: {
      items: [{ item_id: 'SKU123', item_name: 'Cool Jacket', price: 49.99 }]
    }
  });

Manual DataLayer Setup

For a custom setup, you’ll need to:

  1. Fetch Data in Controllers: Use SFCC APIs like ProductMgr.getProduct() for product details or OrderMgr.getOrder() for purchases.
  2. Pass Data to Templates: Add the data to the pdict (pipeline dictionary) in your controller.
  3. Push to dataLayer in ISML: Add a <script> block before the GTM snippet in your template.
  • Example: Product Detail Page (PDP):
  • Controller (Product-Show.js):
    javascript var ProductMgr = require('dw/catalog/ProductMgr'); var product = ProductMgr.getProduct('SKU123'); return { product: product };
  • Template (product.isml):
    html ¨K35K

Repeat this for other events like add_to_cart, begin_checkout, or purchase.

Step 4: Configure GTM for Tracking

Now, head to GTM to set up your tags, triggers, and variables.

Create Variables

  • Go to Variables > New > Data Layer Variable.
  • Name them to match your dataLayer structure (e.g., ecommerce.items.0.item_id, ecommerce.items.0.price).
  • These pull data from the dataLayer for use in tags.

Set Up Triggers

  • Go to Triggers > New > Custom Event.
  • Name the event (e.g., view_item, purchase) to match what SFCC pushes.
  • Example: Trigger fires when Event equals purchase.

Add Tags

  • Go to Tags > New > Google Analytics: GA4 Event.
  • Select your GA4 Configuration Tag, set the event name (e.g., purchase), and map parameters (e.g., transaction_id to {{ecommerce.transaction_id}}).
  • Attach your trigger (e.g., purchase).

Step 5: Test Your Setup

  • In GTM, click Preview to enter debug mode.
  • Open your SFCC storefront, browse products, add to cart, and complete a test purchase.
  • Check the GTM debug panel to ensure:
  • The dataLayer is populated correctly.
  • Triggers fire when expected.
  • Tags send data to your tools (e.g., GA4).

Best Practices for GTM and SFCC Integration

  • Keep It Simple: Start with basic events (product views, purchases) before adding complex custom tracking.
  • Use GA4 Standards: Align your dataLayer with Google Analytics 4’s recommended e-commerce schema for future-proofing.
  • Test Regularly: SFCC updates or cartridge changes can break tracking—test after every deployment.
  • Document Everything: Note your dataLayer structure, triggers, and tags for easy troubleshooting.

Common E-Commerce Events to Track

Here’s a quick table of key events and their dataLayer structures:

EventPurposeExample DataLayer Push
view_itemTrack product page views{ event: 'view_item', ecommerce: { items: [{ item_id: 'SKU123', price: 49.99 }] } }
add_to_cartTrack cart additions{ event: 'add_to_cart', ecommerce: { items: [{ item_id: 'SKU123', quantity: 1 }] } }
begin_checkoutTrack checkout start{ event: 'begin_checkout', ecommerce: { items: [{ item_id: 'SKU123' }] } }
purchaseTrack completed orders{ event: 'purchase', ecommerce: { transaction_id: 'ORD123', value: 49.99, items: [...] } }

FAQs About GTM and SFCC Integration

Do I need a developer for this?

Not necessarily! A cartridge makes it easy for non-coders, but custom setups require SFCC and JavaScript knowledge.

Can I track custom events?

Yes! Push custom events to the dataLayer (e.g., quick_view) and set up matching triggers in GTM.

Does this work with Google Analytics 4?

Absolutely—use GA4’s e-commerce event structure in your dataLayer and GTM tags.

Conclusion: Unlock E-Commerce Insights with GTM and SFCC

Integrating Google Tag Manager with Salesforce Commerce Cloud in 2025 is like giving your online store a superpower. With the dataLayer as your bridge, you can track every customer move and send that info to all your favorite marketing tools—no coding chaos required. Whether you go with a cartridge for speed or a manual setup for control, this guide has you ready to roll.

So, what’s next? Set up your GTM container, plug it into SFCC, and start watching those insights pour in. Your customers are telling you a story—now you’ve got the tools to listen!

Resources

Leave a Comment