Sitecore Integrations

Set up analytics and tracking tools on your Sitecore website to measure performance and user engagement across traditional and headless implementations.

Available Integrations

Google Analytics

Track visitor behavior and conversions with GA4 on Sitecore XP, XM, and JSS.

Google Tag Manager

Centralize all your tracking tags with GTM for easier management across Sitecore implementations.

Meta Pixel

Track Facebook and Instagram ad conversions on Sitecore websites.

Integration Approaches

Sitecore integrations are typically implemented via:

1. Layout Files (MVC)

Add tracking to layout files (Razor views) in traditional Sitecore MVC:

@* /Views/Shared/_Layout.cshtml *@
<!DOCTYPE html>
<html>
<head>
    @Html.Sitecore().Placeholder("head")
    <!-- Analytics code here -->
</head>
<body>
    @RenderBody()
</body>
</html>

2. Renderings

Create dedicated tracking renderings that can be added to any page:

View Rendering: Simple Razor view for tracking code
Controller Rendering: Dynamic tracking with C# logic
JSON Rendering: For JSS/headless implementations

3. Pipeline Processors

Inject tracking at the pipeline level for site-wide implementation:

<!-- App_Config/Include/Analytics/GoogleAnalytics.config -->
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <pipelines>
      <httpRequestBegin>
        <processor type="YourNamespace.Analytics.AddTrackingCode, YourAssembly"
                   patch:after="processor[@type='Sitecore.Pipelines.HttpRequest.StartMeasurements']"/>
      </httpRequestBegin>
    </pipelines>
  </sitecore>
</configuration>

4. Experience Editor Support

Ensure tracking doesn't interfere with the Experience Editor:

@if (!Sitecore.Context.PageMode.IsExperienceEditorEditing)
{
    <!-- Analytics code only in preview/normal mode -->
}

5. JSS/Headless Implementation

For Sitecore JSS applications (React, Vue, Angular):

// /src/Layout.js
import { Placeholder } from '@sitecore-jss/sitecore-jss-react';

const Layout = ({ route }) => (
  <div>
    <Helmet>
      {/* Analytics scripts */}
    </Helmet>
    <Placeholder name="jss-main" rendering={route} />
  </div>
);

Sitecore-Specific Considerations

Multi-Site Management

Sitecore supports multiple sites in one instance. Configure tracking per site:

// Get current site context
var siteName = Sitecore.Context.Site.Name;
var trackingId = GetTrackingIdForSite(siteName);

Site Configuration (web.config or patch files):

<site name="website1"
      hostName="www.site1.com"
      database="web"
      analyticsTrackingId="G-XXXXXXXXX1" />

<site name="website2"
      hostName="www.site2.com"
      database="web"
      analyticsTrackingId="G-XXXXXXXXX2" />

Integration with Sitecore Analytics (xDB)

Sitecore has built-in analytics (xDB). When adding third-party tracking:

Complementary Approach:

Use Sitecore xDB for personalization and CRM integration
Use GA4/GTM for web analytics and reporting
Use Sitecore CDP for customer data platform capabilities

Example: Sync Sitecore Contact ID with GA4:

@{
    var contactId = Sitecore.Analytics.Tracker.Current?.Contact?.ContactId.ToString();
}
<script>
    gtag('config', 'G-XXXXXXXXXX', {
        'user_id': '@contactId'
    });
</script>

SXA (Sitecore Experience Accelerator)

For SXA sites, use component-based approach:

Create SXA Component:

Create rendering variant for tracking
Add to available renderings
Place in SXA partial designs
Configure per site via SXA site settings

SXA Theme Integration: Add tracking to theme's _Layout.cshtml:

@using Sitecore.XA.Foundation.Mvc.Extensions
@Html.Sxa().Placeholder("head")
@* Add analytics here *@

Performance with Sitecore Caching

Sitecore has robust caching. Ensure tracking works with cache:

Output Cache Safe:

@Html.Sitecore().Placeholder("main")

@* This runs client-side, cache-safe *@
<script>
    window.dataLayer = window.dataLayer || [];
    gtag('config', 'G-XXXXXXXXXX');
</script>

VaryByData for Dynamic Tracking:

<renderingId cacheable="true" varyByData="true">
    <!-- Dynamic per user/session -->
</renderingId>

Language and Multi-Language Sites

Track language in analytics:

@{
    var language = Sitecore.Context.Language.Name;
    var country = Sitecore.Context.Language.CultureInfo.TwoLetterISOLanguageName;
}
<script>
    gtag('config', 'G-XXXXXXXXXX', {
        'language': '@language',
        'content_group': '@country'
    });
</script>

Publishing Workflow

Tracking code behavior during publishing:

Preview Mode: Test tracking before publishing
Experience Editor: Disable tracking to avoid test data
Normal Mode: Full tracking active

@{
    var isNormalMode = Sitecore.Context.PageMode.IsNormal;
    var isPreview = Sitecore.Context.PageMode.IsPreview;
}
@if (isNormalMode || isPreview)
{
    @* Tracking code *@
}

Recommended Sitecore Modules

Analytics Modules

Sitecore Experience Accelerator (SXA): Built-in components
Sitecore CDP: Customer Data Platform integration
Sitecore Personalize: Real-time personalization

Tag Management

Google Tag Manager: Recommended for flexible tracking
Tealium iQ: Enterprise tag management

OneTrust: Enterprise consent management
Cookiebot: GDPR compliance
Custom Sitecore Component: Build into your solution

Implement consent before loading tracking:

@* Cookie consent component *@
<div id="cookie-consent" style="display:none;">
    <p>We use cookies for analytics.</p>
    <button onclick="acceptCookies()">Accept</button>
</div>

<script>
    function acceptCookies() {
        localStorage.setItem('cookieConsent', 'true');
        loadAnalytics();
        document.getElementById('cookie-consent').style.display = 'none';
    }

    function loadAnalytics() {
        // Load GTM or GA4
        var script = document.createElement('script');
        script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
        script.async = true;
        document.head.appendChild(script);
    }

    if (localStorage.getItem('cookieConsent') === 'true') {
        loadAnalytics();
    } else {
        document.getElementById('cookie-consent').style.display = 'block';
    }
</script>

Headless/JSS Specific Integration

For Sitecore JavaScript Services:

Next.js Implementation

// /src/Layout.tsx
import { getPublicUrl } from '@sitecore-jss/sitecore-jss-nextjs';
import Script from 'next/script';

const Layout = ({ layoutData }: LayoutProps): JSX.Element => {
  const { route } = layoutData.sitecore;
  const GA_ID = process.env.NEXT_PUBLIC_GA_ID;

  return (
    <>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
        strategy="afterInteractive"
      />
      <Script id="google-analytics" strategy="afterInteractive">
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){window.dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${GA_ID}');
        `}
      </Script>
      <Placeholder name="headless-main" rendering={route} />
    </>
  );
};

React JSS Implementation

// /src/components/Analytics/GoogleAnalytics.js
import React, { useEffect } from 'react';
import { useSitecoreContext } from '@sitecore-jss/sitecore-jss-react';

const GoogleAnalytics = ({ fields }) => {
  const { sitecoreContext } = useSitecoreContext();
  const trackingId = fields?.trackingId?.value;

  useEffect(() => {
    if (trackingId && !sitecoreContext.pageEditing) {
      // Load GA4
      const script = document.createElement('script');
      script.src = `https://www.googletagmanager.com/gtag/js?id=${trackingId}`;
      script.async = true;
      document.head.appendChild(script);

      window.dataLayer = window.dataLayer || [];
      function gtag(){window.dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', trackingId);
    }
  }, [trackingId, sitecoreContext.pageEditing]);

  return null; // No UI rendering
};

export default GoogleAnalytics;

Environment-Specific Configuration

Use Sitecore's environment settings:

App_Config transformation for environments:

<!-- Web.Release.config -->
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
  <appSettings>
    <add key="GoogleAnalytics.MeasurementId"
         value="G-PRODUCTION-ID"
         xdt:Transform="SetAttributes"
         xdt:Locator="Match(key)"/>
  </appSettings>
</configuration>

<!-- Web.Debug.config -->
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
  <appSettings>
    <add key="GoogleAnalytics.MeasurementId"
         value="G-DEVELOPMENT-ID"
         xdt:Transform="SetAttributes"
         xdt:Locator="Match(key)"/>
  </appSettings>
</configuration>

Access in Razor:

@{
    var gaId = System.Configuration.ConfigurationManager.AppSettings["GoogleAnalytics.MeasurementId"];
}
<script>
    gtag('config', '@gaId');
</script>

Sitecore websites often operate globally. Ensure compliance:

Cookie Consent: Implement before tracking loads
IP Anonymization: Enable in tracking configuration
Data Retention: Configure in GA4/analytics platform
Right to be Forgotten: Integrate with Sitecore's data protection features
Sitecore CDP Integration: Unified consent management

Next Steps

Choose your integration:

Sitecore Integrations

Sitecore Integrations

Available Integrations

Google Analytics

Google Tag Manager

Meta Pixel

Integration Approaches

1. Layout Files (MVC)

2. Renderings

3. Pipeline Processors

4. Experience Editor Support

5. JSS/Headless Implementation

Sitecore-Specific Considerations

Multi-Site Management

Integration with Sitecore Analytics (xDB)

SXA (Sitecore Experience Accelerator)

Performance with Sitecore Caching

Language and Multi-Language Sites

Publishing Workflow

Recommended Sitecore Modules

Analytics Modules

Tag Management

Cookie Consent

Cookie Consent with Sitecore

Headless/JSS Specific Integration

Next.js Implementation

React JSS Implementation

Environment-Specific Configuration

Privacy and GDPR Compliance

Next Steps

Related Resources