Integrate Google Analytics through Google Tag Manager

Objective

Integrate Google Analytics (GA) through Google Tag Manager (GTM), and set up Google Tag Manager to send CTA submissions to Google Analytics as custom events.

Step 1: Create a GTM data layer for your Hub

First, set up your Hub to send information to the GTM data layer. This allows GTM to consume this data and eventually send it to GA.

1. Create a new custom code block.
2. Choose the placement Body Bottom for the custom code block.
3. Copy the code snippet below and paste it into the custom code block
   Note: The code snippet you use will depend on if you are using a Front end V1 or V2 Hub.
4. Save the custom code block and enable it.

Front end V1

<script>
(function($,Hubs, undefined){

Hubs.onCtaFormSubmitSuccess = function(ctaId, ctaData, ctaName){
    triggerEventGTM(ctaId, ctaData, ctaName);
};

function triggerEventGTM(ctaId, ctaData, ctaName){

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event' : 'ctaSubmitted',  // value must match the trigger name
      'eventCategory': 'Uberflip CTA',  
      'eventAction': 'Form Submit',
      'eventLabel': 'Uberflip-CTA-' + ctaName + "-" + ctaId + " Success" 
    });
}

}(window.jQuery, window.Hubs));
</script>

Front end V2

<script>
window.addEventListener('uberflip.ctaFormSubmitSuccess', (data) => {
   const { ctaId, ctaData, ctaName } = data.detail;
   triggerEventGTM(ctaId, ctaData, ctaName);
});

function triggerEventGTM(ctaId, ctaData, ctaName){

   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
     'event' : 'ctaSubmitted',  // value must match the trigger name
     'eventCategory': 'Uberflip CTA',  
     'eventAction': 'Form Submit',
     'eventLabel': 'Uberflip-CTA-' + ctaName + "-" + ctaId + " Success" 
   });
}
</script>

Step 2: Configure the GA custom event in GTM

With the GTM data layer set up on your Hub, you need to configure GTM to process this data and send it to GA. The following setup will send a custom event to GA each time a CTA associated with your Hub (either in the Hub, or embedded elsewhere) is submitted.

To set this up in GTM, you need to create three data layer variables, a trigger, and a tag:

Create Variables

First, create the following three user-defined variables in GTM, as shown in the screenshots:

1. eventAction:
   
2. eventCategory:
   
3. eventLabel:
   

Create Trigger

Next, create a "Custom Event" trigger, and configure it as shown in the screenshot:

Create Tag

Finally, create a custom tag for the CTA Submit Event that leverages the variables and trigger you created earlier.

To do this, create a "Universal Analytics" tag. When you set up the tag, choose the Track Type "Event" (not "Page View"), and configure it as shown in the screenshot:

Additional Notes

Once set up, the custom event will fire the following two events in GA whenever the corresponding type of CTA is submitted in the Hub where you created the data layer:

Hub CTAs

• Event Category: Uberflip CTA Hub

• Event Action: Form Submitted

• Event Label: CTA Name + ID + Item Name (if applicable)

Embedded CTAs

• Event Category: Uberflip CTA Embedded

• Event Action: Form Submitted

• Event Label: CTA Name + ID + Item Name (if applicable)

Note: Item name would only be applicable in instances where the CTA was submitted at the Item level on a Hub.