Skip to main content

[Growth Hub] Embed the Storefront and Track Bookings with GA4 (Step 1)

Understand how Smart Embedding, Cookie Consent, and GA4 Tracking work together before you start configuring each one.

Written by Yasen Marinov
Updated today

If you want to embed your Growth Hub storefront on your website and track bookings in Google Analytics, you are working with 3 features that depend on each other. Each one has its own setup article, but the order matters, and the connection between them might not be obvious.

This article explains what each feature does, why they are linked, and the correct order to set them up. Once you have the full picture, follow the links to each dedicated article to complete the configuration.


In this article:

  • Understand what Smart Embedding, Cookie Consent, and GA4 Tracking each do.

  • See how the 3 features depend on each other.

  • Follow the correct setup sequence with links to each detailed article.

  • Troubleshoot the most common points where things break.


Overview of the features and what they do

These 3 features work as a chain. Each one relies on the previous one being in place.

Smart Embedding

Cookie Consent Listener

GA4 Tracking

Adds your Growth Hub storefront to any page on your website as a web component. Customers browse and book without leaving your site.

Receives the consent state from your website's cookie banner and passes it to Growth Hub. Controls which cookies and trackers are active.

Sends booking and checkout events from your storefront to Google Analytics 4 via Google Tag Manager. Only activates when marketing consent is true.

Start here. Nothing else works without this.

Set up after embedding. Required for GA4 to initialize.

Set up last, after consent is configured.


How the features connect

The dependencies among the three features are straightforward but easy to miss.

Smart Embedding puts your storefront on your website. Without it, there is nothing to track and no surface to attach consent to.

Cookie Consent listens for the consent signal from your website's cookie banner and passes it to Growth Hub. This is the gate that controls whether GA4 is permitted to run.

GA4 Tracking only initializes when marketing consent is explicitly set to 'true'. If consent is missing, false, or not configured, GA4 does not start, and no booking events are sent to Google Analytics.

Why GA4 might not be tracking? The most common reason GA4 shows no data from your Growth Hub storefront is that marketing consent was never passed to the web component. GA4 will not initialize until it receives marketing: true from your cookie banner. Check your Cookie Consent setup before debugging GA4.

Your website's cookie banner (whichever CMS or Consent Management Platform you use) is responsible for sending the consent state to Growth Hub. Growth Hub listens for that signal. It does not generate or manage its own cookie banner.


Setup sequence

Follow these steps in order. Skipping ahead will cause tracking to fail, even if the individual configurations look correct.

Step

What you do

Why it matters

Help resource

1

Embed your Growth Hub storefront using Smart Embedding

Your storefront must be live on your website before consent or tracking can work

2

Set up a Google Analytics 4 account and a GTM container

You need your GTM ID and GA4 Measurement ID before configuring Growth Hub

3

Connect your website's cookie banner to Growth Hub using the Cookie Consent Listener

Growth Hub will not initialize GA4 until marketing consent is set to true. This step passes that signal

4

Configure GA4 tracking in OfficeRnD and import the GTM container

Sends booking and checkout events to GA4. Only fires when marketing consent is active

Do not skip Step 3: Even if GA4 appears to be receiving some data, skipping the Cookie Consent Listener means you are not compliant with cookie consent requirements. GA4 tracking in Growth Hub is designed to activate only with explicit marketing consent. Without this step, tracking may fire for users who have not consented.


How consent controls GA4 tracking

This is the part most operators miss. Growth Hub uses your website's consent signal to decide whether to initialize Google Tag Manager, which is what sends events to GA4.

Here is what happens at each consent state:

Consent state

What Growth Hub does

Result in GA4

marketing: true

Initializes GTM and starts sending booking and checkout events

Events tracked. Data appears in GA4 reports.

marketing: false

GTM does not initialize. No tracking fires.

No data sent to GA4.

No consent passed

Defaults to 'false'. GTM does not initialize.

No data sent to GA4.


Best practices

Set up in order. Embed first, then consent, then GA4. Configuring GA4 before consent is connected is the most common reason tracking is broken.

Test consent before testing GA4. After Step 3, check the cookie value (gh-webc-consent-cookie-{yourSlug}) in your browser to confirm marketing: true is being stored. If it is not, GA4 will not fire regardless of what you configured in Step 4.

Use GTM Preview Mode to verify events. Before publishing your GTM container, use Preview Mode to confirm booking events are firing correctly. This is faster than waiting for GA4 reports to populate.

If your CMS already manages GTM, avoid double initialization. Set skip-gtm-initialization to 'true' on the Growth Hub web component if your parent website already loads GTM. Running 2 instances causes duplicate events in GA4.


Detailed setup articles

Once you understand how the 3 features connect, use these articles to complete each step.

Feature

What the article covers

Link

Smart Embedding

Loading the web component, configuration attributes, routing, and CSS setup

Cookie Consent Listener

Passing consent via component attribute or postMessage API, consent categories, storage, and defaults

GA4 Tracking

Creating GA4 and GTM accounts, entering your GTM ID in OfficeRnD, importing the events container, and verifying data


FAQs

Q: GA4 is not showing any data from my storefront. Where do I start?

Check marketing consent first. Open your browser's Developer Tools and look for the cookie gh-webc-consent-cookie-{yourSlug}. If marketing is not set to true, GA4 will not fire. Fix the consent setup before checking anything else.

Q: My cookie banner is on my website. Do I need to do anything extra to connect it to Growth Hub?

Yes. Your cookie banner does not automatically connect to Growth Hub. You need to configure it to send the consent state to the Growth Hub web component, either via the consent attribute on the component tag or via the postMessage API. See the Configure Consent Management article for the exact method.

Q: I already have GTM on my website. Will Growth Hub create a duplicate?

Yes, if you do not account for it. Set skip-gtm-initialization to true on the Growth Hub web component if your parent website already loads GTM. This tells Growth Hub to skip its own GTM initialisation and prevents duplicate event firing.

Q: Does Growth Hub work with any CMS or cookie banner?

Yes. Growth Hub listens for a consent signal via a standard postMessage event or a component attribute. Any CMS or Consent Management Platform that can send a postMessage or set an attribute on a web component can integrate with it. No CMS-specific configuration is required on the Growth Hub side.

What happens to users who decline marketing cookies?

GA4 tracking does not initialize for those users, and their booking activity is not sent to Google Analytics. The booking itself completes normally in Growth Hub. Only the analytics tracking is affected.

Did this answer your question?