Google Tag Manager (GTM) is a tag management system that allows you to quickly and easily include engagement measurements through what are collectively known as tags or pixels on a website or mobile app. You can add GTM tags to your Jebbit campaigns to track and segment users who engage with the experience.

Click on the "More" option from the toolbar in the upper right corner of the builder map. Then select "Add Vendor Pixels" from the menu that appers.

On the modal that opens up, paste your GTM container snippet into the JavaScript Pixels text box. It is not necessary to add the the Google Tag Manager (non-script) snippet, so leave this out. Your snippet should look like this:

If you plan to embed your experience onsite (as an iframe, Companion, or Lightbox), then you may need to select the "Send data to parent page" checkbox. If you do this, 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 want to receive the events through postMessage, do not check this box and proceed to the next step.

Now it's time to define your events. GTM utilizes data layer events to pass data to your GTM container. Click on "Create Events" to proceed in Jebbit.

To create your first event, you need to select whether it should fire "on load" or "on response" as the Event Type. An "on response" event is typically used to create custom segmentation tied to button clicks, while an "on load" event will simply fire when the screen is in view.

Once you select the Event Type, you will move on to defining the "event" and "event names."

Once you have gone through and added all of your events, click on the "Done" button in the upper right corner of the modal, and you will be brought back to the builder map.

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 of the dataLayer.push events shown for your pixel:

We also recommend using https://tagassistant.google.com/ as a useful tool for testing GTM pixels.

Q: How are events passed from Jebbit to GTM?

A: 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:

When "Razor" is selected the dataLayer push will look like this:

Q: It it possible to add more than one event to the same screen?

A: You can add numerous event key/value pairs for the same questions and responses.

Q: What does the "Include quotes" setting control?

A: If the checkbox is unselected, number and true/false statements will be converted to their proper format.

Q: Does the process to test differ for Lightbox and Companion experiences?
A: 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.

Q: How do I test the events set up if I'm using the postMessage implementation?

A: 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 Jebbit Support team if you are stuck.