Integrate Google Tag Manager (GTM) and Google Analytics 4 (GA4) with Experiences by Jebbit to track user engagement and send valuable data. GTM allows for flexible tracking and segmentation using tags or pixels. The GA4 integration provides a direct way to send data on screen visits, responses, leads, and add-to-cart events.
Before you begin
Determine the specific events within your experience that you want to track (e.g., page loads, button clicks).
Decide whether your experience will be embedded on your site (as an iframe, Companion, or Lightbox), as this may affect configuration settings.
Ensure you have access to your GTM container snippet.
Locate your Google Analytics 4 Measurement ID. This ID typically starts with "G-" and is found in Google Analytics under Admin > Property > Data Streams.
How the integration works
Jebbit passes data to GTM and GA4 in different ways:
Google Tag Manager: GTM utilizes data layer events to pass data to your GTM container. All GTM events are passed as event key/value pairs to the dataLayer.push event action. An example structure is dataLayer.push
({'EVENT KEY': 'EVENT VALUE'});You can add numerous event key/value pairs for the same questions and responses.
Google Analytics 4: The Google Analytics 4 integration sends four types of events to your property:
On Screen Load: page_view
Fires a page view event each time a screen loads.
Passes a unique URL and the Screen Name.
Helpful for understanding which screens a user visited, especially since a Jebbit experience is a single-page application.
On Screen Response: custom_event
For each response a user selects, the response and question name are passed.
Helpful for understanding customer preferences and segmenting data (e.g., comparing conversion rates by age group, determining purchase likelihood for recommended products or specific audience segments like Side Sleepers).
Lead Capture: generate_lead
Fires an event when an email or phone number is captured.
Indicates that lead information was collected, but does not send the email address itself, as this is considered Personally Identifiable Information (PII) and is prohibited in Google Analytics.
Add to Cart: add_to_cart
If you use the add to cart feature with Shopify or BigCommerce, this event fires when a user adds products to their cart.You can also send data to a parent page using postMessage. This allows cross-origin communication for embedded experiences like iframes, Companion, or Lightbox units. For GA4, these events fire with an action of "fireGTM".
Add GTM pixels
In order to add GTM pixel, follow the steps below:
Click on the More option from the toolbar in the upper right corner of the Builder Map.
Select Add Vendor Pixels from the menu that appears.
On the modal that opens up, paste your GTM container snippet into the JavaScript Pixels text box. It is not necessary to add the Google Tag Manager (non-script) snippet, so leave this out. Your snippet should resemble this:
(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='//www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXX');If you plan to embed your experience onsite (as an iframe, Companion, or Lightbox), then select the Send data to parent page checkbox. Experiences by Jebbit will use postMessage to send the events to the parent page. Sending events via postMessage allows cross-origin communication between Window objects.
If you do not require this functionality, leave the checkbox unselected.
Click on Create Events within the modal to begin setting up your GTM events. GTM utilizes data layer events to pass data to your GTM container.
For each event, choose the Event Type:
On Load: Fires when the screen is in view.
On Response: Fires upon user interaction, such as button clicks.
Define the Event Name and associated key/value pairs to be pushed to the data layer.
After adding all desired events, click Done in the upper-right corner of the modal to return to the builder map.
Test Google Tag Manager (GTM) Events
It's important to test your GTM implementation before you publish your experience and shared it with your audience, to ensure everything is working as expected.
Open the draft link for your experience by clicking on the dropdown of the Preview tab and selecting Full Screen Preview.
Engage with your draft experience until you've reached the screen that comes after the last screen with an event mapped to it. If this means that you will be redirected out of the quiz, then temporarily remove the redirect URL to ensure you can test the final screen's events using this guide.
Once you've reached the last screen in the experience, open the Inspect tools in your browser.
Under the Network tab, in the Filter section, type “gtm-” to verify that the container ID you have is being called.
Within the Console tab, type in “dataLayer” and hit enter. Expand the result, and you should see all the dataLayer.push events shown for your pixel.
Tip: We also recommend using https://tagassistant.google.com/ as a useful tool for testing GTM pixels.
Add Google Analytics 4 integration
You can set up the integration on an individual campaign or for your entire brand.
Set up on an individual campaign
In the Builder Map, click the 3-dot menu.
Select Vendor Pixels.
Paste your Measurement ID into the field and click Save.
Set up on a brand
Setting up at the brand level applies the integration to all campaigns within that brand.
Visit the Integrations page.
Click on the Google Analytics tile.
Click Connect.
Paste your Measurement ID into the field.
Click Save.
Configure additional settings
Send data to parent page: Select this checkbox if you plan to embed your experience onsite (as an iframe, Companion, or Lightbox) and need to send events via postMessage to the parent page.
Enable Campaign Events: Use this toggle to turn the pixel on or off to send events for that campaign.
Next steps
Publish your experience once you've confirmed that all GTM and GA4 events are firing as expected.
Monitor the data collected in your GTM and associated analytics platforms to gain insights into user engagement.
FAQ
How are events passed from Experiences by Jebbit to GTM?
All GTM events will be passed as event key/value pairs to the datalayer.push event action. You can learn more about how events are passed to the data layer with GTM here.
Here is an example of a dataLayer push is structured:
dataLayer.push({'EVENT KEY': 'EVENT VALUE'});
When "Shave Prep" is selected the dataLayer push will look like this:
dataLayer.push({'grooming_routine': 'shave prep'});
dataLayer.push({'question_answered': true);
When "Razor" is selected the dataLayer push will look like this:
dataLayer.push({'grooming_routine': 'razor'});
dataLayer.push({'question_answered': true);
Is it possible to add more than one event to the same screen?
You can add numerous event key/value pairs for the same questions and responses.
What does the "Include quotes" setting control?
If the checkbox is unselected, number and true/false statements will be converted to their proper format.
Does the process to test differ for Lightbox and Companion experiences?
Yes, there is a slight tweak to the process for these types of deployments. If you've added GTM to either a Lightbox or Companion unit, then you need to adjust the dropdown in the Console so that it shows the experience ID as opposed to "top." Once you do this, you can follow the same steps outlined above.
How do I test the events set up if I'm using the postMessage implementation?
When you 'Send data to the parent page' we pass data as postMessage events. This means you will need a postMessage listener set up on your website to receive the events properly. You should work with your dev team to test your postMessage implementation. You can also reach out to the Experiences Support team if you are stuck.