Install Google Analytics 4 on Salesforce Commerce Cloud

This guide covers implementing GA4 on Salesforce Commerce Cloud (SFCC) using the recommended cartridge approach with SFRA.

Method Comparison

Method 1: Salesforce Analytics Cartridge

Salesforce provides official analytics integration cartridges.

Setup Steps

1. Download the Cartridge

   • Access SFCC Marketplace or Partner Portal
   • Download int_googleanalytics cartridge
   • Extract to your cartridge directory

2. Configure Cartridge Path In Business Manager, go to Administration > Sites > Manage Sites > [Your Site] > Settings:

   Add to cartridge path:

   int_googleanalytics:app_storefront_base
   

3. Configure Site Preferences Navigate to Merchant Tools > Site Preferences > Custom Site Preference Groups:

   • GA4 Measurement ID: G-XXXXXXXXXX
   • Enable Enhanced Ecommerce: true
   • Debug Mode: false (set to true for testing)

4. Deploy and Test

   • Deploy cartridge to sandbox
   • Verify tracking in GA4 DebugView
   • Deploy to production after validation

Method 2: Custom SFRA Implementation (Recommended)

For more control, implement GA4 directly in your SFRA storefront.

Step 1: Create gtag.js Include

Create a new ISML template for the GA4 script:

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

<isscript>
    var gaConfig = {
        measurementId: dw.system.Site.current.getCustomPreferenceValue('GA4MeasurementID') || '',
        debugMode: dw.system.Site.current.getCustomPreferenceValue('GA4DebugMode') || false
    };
</isscript>

<isif condition="${gaConfig.measurementId}">
    <script async src="https://www.googletagmanager.com/gtag/js?id=${gaConfig.measurementId}"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '${gaConfig.measurementId}', {
            debug_mode: ${gaConfig.debugMode},
            send_page_view: false
        });
    </script>
</isif>

Step 2: Include in Head Template

Edit your htmlHead.isml to include the GA4 script:

<isinclude template="components/ga4"/>

Step 3: Create Data Layer Controller

cartridges/app_custom/cartridge/controllers/DataLayer.js

'use strict';

var server = require('server');
var BasketMgr = require('dw/order/BasketMgr');
var ProductMgr = require('dw/catalog/ProductMgr');

server.get('GetPageData', function (req, res, next) {
    var pageType = req.querystring.pageType || 'other';
    var data = {
        page_type: pageType,
        user_logged_in: req.currentCustomer.raw.authenticated
    };

    if (req.currentCustomer.raw.authenticated) {
        data.user_id = req.currentCustomer.raw.ID;
    }

    res.json(data);
    return next();
});

server.get('GetCartData', function (req, res, next) {
    var currentBasket = BasketMgr.getCurrentBasket();
    var items = [];

    if (currentBasket) {
        var productLineItems = currentBasket.getAllProductLineItems();
        for (var i = 0; i < productLineItems.length; i++) {
            var pli = productLineItems[i];
            items.push({
                item_id: pli.productID,
                item_name: pli.productName,
                price: pli.adjustedPrice.value,
                quantity: pli.quantityValue
            });
        }
    }

    res.json({
        items: items,
        value: currentBasket ? currentBasket.totalGrossPrice.value : 0,
        currency: currentBasket ? currentBasket.currencyCode : 'USD'
    });
    return next();
});

module.exports = server.exports();

Step 4: Implement Page View Tracking

Add to your main client-side JavaScript:

// Client-side GA4 tracking
(function() {
    function getPageType() {
        var body = document.body;
        if (body.classList.contains('page-product')) return 'product';
        if (body.classList.contains('page-category')) return 'category';
        if (body.classList.contains('page-cart')) return 'cart';
        if (body.classList.contains('page-checkout')) return 'checkout';
        if (body.classList.contains('page-confirmation')) return 'purchase';
        return 'other';
    }

    gtag('event', 'page_view', {
        page_type: getPageType(),
        page_location: window.location.href,
        page_title: document.title
    });
})();

Verification

Using GA4 DebugView

1. Enable debug mode in site preferences
2. Install Google Analytics Debugger extension
3. Navigate to GA4 > Admin > DebugView
4. Verify events appear in real-time

Common Verification Points

• Page views tracked on all templates
• User ID captured for logged-in users
• Ecommerce events fire correctly
• No duplicate events

Next Steps

• Event Tracking Guide
• Ecommerce Implementation
• Troubleshooting Events Not Firing