Setting Up the Ceros Integration for Google Tag Manager

5 Minute read

Reading Time: 5 minute

If you are using Google Tag Manager (GTM), you can leverage the Ceros integration with GTM to send page view, click, and hover events to a tag configured in a GTM container. 

Skip to Tag Manager container setup

This allows you to send your Ceros metrics (i.e. page views, clicks, hovers) back to Google Analytics or any other analytics platform you are currently using,  enabling you to keep all of your analytics in one place. If you are already managing your tags through GTM, you can continue to do so with Ceros.

Things to keep in mind

  • When a Ceros experience is shared as a standalone experience either using the view.ceros.com URL or a vanity URL, the GTM script is loaded within the experience, and pageviews, clicks and/or hover events will be sent to Google Analytics. This functionality is built in, and there is no need to manually add the GTM script.
  • If a Ceros experience is embedded, Ceros will NOT fire a pageview.  Pageviews will come from the parent page, and Ceros will send click and/or hover events to the GTM instance on the parent page.   
  • Embedded Ceros experiences, the integration relies on a correct and standard implementation of the GTM script on the parent page. If that is not present, is present but not configured properly, or the container ID used on the parent page does not match what’s used in the integration settings, events will still be sent, but they will not go anywhere.

What is sent via GTM?

Example Pageview Event Sent to the Data Layer:

dataLayer.push({
  event: "ceros-pageview"
  cerosPagePath: "/my-account/my-experience/p/1"
  cerosPageLocation: "http://view.ceros.com/my-account/my-experience/p/1"
  cerosPageTitle: "Overview Page"
});

Data Values:

  • event: This identifies the source of the page view event (Ceros) and is used as a trigger value for custom tags in the GTM container. This value cannot be changed.
  • cerosPagePath: The relative path and query params of the page URL.
  • cerosPageLocation: The full page URL (including query params).
  • CerosPageTitle: The title of the page set in the Ceros Studio.

Click/Hover Events:

dataLayer.push({
	event: "ceros-event",
	cerosCategory: "ceros-event",
	cerosAction: "ceros-click",
	cerosLabel: "Hotspot Label Example - Download CTA"
});

Data Values:

  • event: This identifies the source of the event (Ceros) and is used as a trigger value for custom tags in the GTM container. This value cannot be changed.
  • cerosCategory: This value is used as a top-level grouping of the click/hover events. The default is “ceros-event, but this can be changed in the integration options.
  • cerosAction: This is the name of the event being sent. The defaults are “ceros-click” and “ceros-hover” for click and hover events, respectively. These values can be changed in the integration options.
  • cerosLabel: This is the name of the object in the studio (typically a hotspot) that triggers the event.

Whether the Ceros experience is embedded or standalone, you must have tags, triggers and variables set up within the Tag Manager container in order for events to pass to Google Analytics. With the integration turned on, Ceros will always send events, but if there are no tags set up, those events will not go anywhere. This guide will explain how to set up Tag Manager for Ceros events.

Setting up your GTM integration in Ceros:

  1. Copy your GTM Container ID from Tag Manager.
    If embedding, the container ID used here must match what’s used on the parent page.
  2. To set up the integration at the Account Level, in the Ceros Admin, select your name from the drop down and navigate to Account > Integrations.
    To set it up at the Experience Level, click the gear icon on the experience within a project.
  3. Toggle on the integration for Google Tag Manager
  4. Paste in your Container ID
  5. If the experience will be standalone, toggle on Track Page Views for Standalone Experiences.
    Page view events will not be sent if the experience is embedded.
  6. Identify your Event Category, this will be used as the top-line grouping of the click/hover events.  You can leave it as the default “ceros-event” unless you need to use a different category name.
  7. Toggle on Track Clicks, Track Hovers, or both.  You can also enter your own Click Event Action and Hover Event Action values, but most people tend to use the defaults. These values will be sent back to identify your click and hover events
  8. Make sure that when creating your Ceros experience, each interaction is on a hotspot that is labeled with a specific name—the names of your hotspots are going to be the event values that identify what is being clicked and hovered over, so it’s very important to have unique names on these.
  9. Click Save.

That’s all you need to do on the Ceros side. Next, we’ll go over how to set up Tag Manager to fire tags on Ceros events.

Getting Ceros Events from GTM 

Step 1: Set up Ceros Event Variables

  1. Go to Variables and select New under “User-Defined Variables”
  2. Click Variable configuration and select Data Layer Variable
  3. Create variables for cerosAction, cerosLabel, and cerosCategory.
    Below is an example of what cerosAction would look like. Repeat for cerosLabel and cerosCategory as well.

Step 2: Set Up Ceros Trigger(s)

  1. Go to Triggers, select New
  2. Click Trigger Configuration select Custom Event
  3. Give this a name and make sure “All Custom Events” is selected

This trigger, when added to a tag, will fire the tag on any Ceros event, whether it’s a click or a hover, but you can also set up triggers for clicks and hovers individually by setting up a condition for each.  Below is an example for a trigger that only fires for clicks.

Step 3: Set Up the Ceros Tag(s)

  1. Go to Tag and select New
  2. Click Tag Configuration select Google Analytics: Universal Analytics
  3. On the drop down for Track Type select Event
  4. For Category, Action and Label select the Variables you created
  5. Value can stay empty unless you do have a value for the event
  6. On the drop down for Google Analytics Settings select your Variable for your Google Analytics 
  7. Click on Triggering and select the Custom Event you created in step 2
  8. Make sure you name and save your new tag
  9. Preview and check that events are being sent back to your Google Analytics dashboard

Your tag set up should be similar to below:

To set up a tag that fires only on a hover or only on a click, you would create those tags the same way, but use the individual triggers.

If you have any further questions about Google Tag Manager, feel free to ping our support team in the chat widget in the studio. And be sure to check out this article to learn more about setting up your Google Analytics Integration.

Was this helpful?

15 1
15 out of 16 people found this helpful