Google Tag Manager on Salesforce Commerce Cloud | Blue Frog Docs

Google Tag Manager on Salesforce Commerce Cloud

Implementing GTM on SFCC with data layer integration

Google Tag Manager on Salesforce Commerce Cloud

This guide covers implementing Google Tag Manager (GTM) on Salesforce Commerce Cloud. GTM provides centralized tag management for all your marketing and analytics tools.

Prerequisites

  1. Create a GTM Container

    • Sign in to tagmanager.google.com
    • Create a new container (Web)
    • Copy your Container ID (format: GTM-XXXXXXX)

  2. SFCC Access Requirements

    • Business Manager admin access
    • Cartridge development environment
    • Git repository access

Installation Method

Step 1: Create GTM ISML Template

cartridges/app_custom/cartridge/templates/default/components/gtm.isml

<isscript>
    var gtmConfig = {
        containerId: dw.system.Site.current.getCustomPreferenceValue('GTMContainerID') || '',
        enabled: dw.system.Site.current.getCustomPreferenceValue('GTMEnabled') || false
    };
</isscript>

<isif condition="${gtmConfig.enabled && gtmConfig.containerId}">
    <!-- Google Tag Manager (head) -->
    <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','${gtmConfig.containerId}');
    </script>
</isif>

Step 2: Create GTM NoScript Template

cartridges/app_custom/cartridge/templates/default/components/gtmNoscript.isml

<isscript>
    var gtmConfig = {
        containerId: dw.system.Site.current.getCustomPreferenceValue('GTMContainerID') || '',
        enabled: dw.system.Site.current.getCustomPreferenceValue('GTMEnabled') || false
    };
</isscript>

<isif condition="${gtmConfig.enabled && gtmConfig.containerId}">
    <!-- Google Tag Manager (noscript) -->
    <noscript>
        <iframe src="https://www.googletagmanager.com/ns.html?id=${gtmConfig.containerId}"
                height="0" width="0" style="display:none;visibility:hidden">
        </iframe>
    </noscript>
</isif>

Step 3: Include in Layout Templates

In htmlHead.isml (before closing </head>):

<isinclude template="components/gtm"/>

In page.isml (immediately after opening <body>):

<isinclude template="components/gtmNoscript"/>

Step 4: Configure Site Preferences

Create custom site preferences in Business Manager:

Administration > Site Development > System Object Types > SitePreferences

Add attributes:

  • GTMContainerID (String) - Your GTM container ID
  • GTMEnabled (Boolean) - Enable/disable GTM

Step 5: Set Preference Values

Merchant Tools > Site Preferences > Custom Site Preference Groups

  • GTMContainerID: GTM-XXXXXXX
  • GTMEnabled: true

Data Layer Initialization

Initialize the data layer before GTM loads:

cartridges/app_custom/cartridge/templates/default/components/dataLayerInit.isml

<script>
    window.dataLayer = window.dataLayer || [];

    // Base page data
    dataLayer.push({
        'pageType': '${pdict.pageType || "other"}',
        'siteName': '${dw.system.Site.current.name}',
        'siteLocale': '${request.locale}',
        'currency': '${session.currency.currencyCode}'
    });

    <isif condition="${customer.authenticated}">
    // User data (no PII)
    dataLayer.push({
        'userLoggedIn': true,
        'userType': '${customer.customerGroups.length > 0 ? "member" : "registered"}'
    });
    <iselse>
    dataLayer.push({
        'userLoggedIn': false,
        'userType': 'guest'
    });
    </isif>
</script>

Include this template before the GTM head script:

<isinclude template="components/dataLayerInit"/>
<isinclude template="components/gtm"/>

Verification

GTM Preview Mode

  1. Open GTM and click Preview
  2. Enter your SFCC storefront URL
  3. Navigate through pages
  4. Verify tags fire correctly

Debug Console

Check browser console for:

// Verify GTM loaded
console.log(google_tag_manager);

// Verify dataLayer
console.log(dataLayer);

Common Verification Points

  • GTM container loads on all pages
  • No JavaScript errors in console
  • Data layer initialized before GTM
  • Tags fire on correct triggers

Content Security Policy

If using CSP headers, allow GTM domains:

script-src 'self' https://www.googletagmanager.com https://www.google-analytics.com;
img-src 'self' https://www.googletagmanager.com https://www.google-analytics.com;
connect-src 'self' https://www.google-analytics.com https://analytics.google.com;

Next Steps

↑ Back to top
// SYS.FOOTER