Site icon ni18 Blog

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

ni18
Google Tag Manager (GTM) - SFCC

Google Tag Manager (GTM) - SFCC

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:

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:

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).

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.

  <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>

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:

  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.

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

Set Up Triggers

Add Tags

Step 5: Test Your Setup

Best Practices for GTM and SFCC Integration

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

Exit mobile version