Bloomreach Analytics Integrations: Setup Guide | OpsBlu Docs

Bloomreach Analytics Integrations: Setup Guide

Integrate GA4, GTM, and Meta Pixel with Bloomreach Experience Manager using the SPA SDK, channel manager, and HST components.

Bloomreach Experience Manager (brXM, formerly Hippo CMS) is a Java-based enterprise content management platform with a headless-first architecture. Integrating analytics requires understanding Bloomreach's channel-based content delivery, the SPA SDK for React/Next.js frontends, and the HST (Hippo Site Toolkit) component model for traditional server-rendered pages.

Integration Architecture

Bloomreach supports two primary delivery models, each with different integration approaches:

  1. SPA SDK (Headless) -- React, Next.js, or Angular frontends fetch content via the Delivery API. Analytics integration happens in the frontend framework, not in Bloomreach itself.
  2. HST/Freemarker (Server-Rendered) -- Traditional server-side rendering using Freemarker templates. Scripts are added to HST page layouts or channel configurations.
  3. Channel Manager -- Bloomreach's visual page editor allows drag-and-drop component placement, including custom components that can inject tracking scripts.
  4. Experience Manager API -- Server-side event forwarding for backend analytics (purchase events, form submissions).

Available Integrations

Analytics Platforms

Google Analytics 4

  • SPA SDK: gtag.js in React/Next.js app shell
  • HST: Freemarker template injection in page layout
  • Bloomreach Engagement integration (native analytics)

Tag Management

Google Tag Manager

  • SPA: GTM snippet in app shell index.html or _document.tsx
  • HST: Freemarker <head> layout component
  • Channel Manager: custom GTM container component

Marketing Pixels

Meta Pixel

  • Via GTM container (recommended for both delivery models)
  • SPA: React component with route-change tracking
  • Conversions API via Bloomreach Engagement webhooks

SPA SDK Integration (Headless)

For React/Next.js frontends using the Bloomreach SPA SDK, analytics integration follows standard SPA patterns. Add GTM to your app shell:

// pages/_app.tsx (Next.js with Bloomreach SPA SDK)
import { BrPage } from '@bloomreach/react-sdk';
import Script from 'next/script';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Script id="gtm" strategy="afterInteractive">
        {`(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-XXXX');`}
      </Script>
      <BrPage configuration={pageProps.configuration} mapping={componentMapping}>
        <Component {...pageProps} />
      </BrPage>
    </>
  );
}

Handle SPA route changes by pushing virtual pageview events:

// hooks/usePageTracking.ts
import { useRouter } from 'next/router';
import { useEffect } from 'react';

export function usePageTracking() {
  const router = useRouter();
  useEffect(() => {
    const handleRouteChange = (url) => {
      window.dataLayer?.push({
        event: 'virtual_pageview',
        page_path: url,
        page_title: document.title,
      });
    };
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => router.events.off('routeChangeComplete', handleRouteChange);
  }, [router.events]);
}

HST/Freemarker Integration (Server-Rendered)

For traditional Bloomreach sites using Freemarker templates, add GTM to your base page layout:

<#-- base-layout.ftl -->
<!DOCTYPE html>
<html>
<head>
  <!-- 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-XXXX');</script>

  <script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'pageType': '${hstRequest.requestContext.resolvedSiteMapItem.relativeContentPath!"unknown"}',
    'channel': '${hstRequest.requestContext.resolvedMount.mount.name!"default"}',
    'locale': '${hstRequest.locale!"en"}'
  });
  </script>
  <@hst.headContributions />
</head>

Platform Limitations

SPA route tracking. In headless mode, Bloomreach content changes are fetched via API without full page reloads. Standard GTM page view triggers (based on gtm.js or History Change) may not fire correctly. You must manually push virtual pageview events on route changes.

Channel Manager preview mode. The Channel Manager's visual editor loads pages in an iframe with additional Bloomreach JavaScript. Tracking scripts fire during preview editing sessions, polluting analytics data. Use GTM's environment feature or a hostname-based trigger exclusion to suppress tracking in preview mode.

Bloomreach Engagement overlap. If using Bloomreach Engagement (formerly Exponea), its SDK collects pageview, session, and conversion data independently. Running both GA4 and Bloomreach Engagement creates duplicate data streams. Decide on a primary analytics platform or use server-side event deduplication.

Content versioning. Bloomreach's workflow system (draft, live, offline) means the same URL can serve different content versions. Data layer values based on content properties may differ between preview and production, making QA validation essential.

Performance Considerations

  • SPA SDK bundle size. The @bloomreach/react-sdk package adds ~15KB gzipped. Combined with GTM and analytics scripts, the total JavaScript payload can exceed 200KB. Use dynamic imports for non-critical tracking components.
  • Delivery API latency. In headless mode, each page load requires an API call to the Bloomreach Delivery API. Adding multiple tracking scripts extends the total page load time. Use GTM's tag firing priority to defer non-essential pixels.
  • Freemarker rendering. HST component rendering is synchronous. Complex data layer logic in Freemarker templates adds to server-side response time. Pre-compute data layer values in Java backing beans rather than in templates.
  1. Add GTM to app shell (SPA) or base layout (HST) -- Single container for all tracking
  2. Implement route-change tracking -- Essential for SPA mode, use routeChangeComplete events
  3. Build content-aware data layer -- Map Bloomreach content types, channels, and locales to data layer variables
  4. Configure GA4 via GTM -- Use content group settings to map Bloomreach channel structure
  5. Add Meta Pixel via GTM -- Map relevant user actions to Meta standard events

Next Steps

For general integration concepts, see the integrations overview.

शीर्ष पर वापस जाएँ