Google Analytics 4 Integration Using Google Tag Manager

Overview

This document is a guide to help you set up the Google Analytics 4 Event Tracking for Hushly Runtime Events using the Google Tag Manager.

Tracking Events

Following Hushly events can be tracked via Google Analytics

1. Content View.

2. Content Interaction.

3. Invalid Form Submit.

4. Valid Form Submit.

Install the Tag using Google Tag Manager

You can use Google Tag Manager to add the Google Analytics code to your Hub.

1. On Google Tag Manager, go to the Admin tab > Install Tag Manager.
   
   

2. Copy the Code.
   

3. Log in to Hushly and navigate to Hubs, select a Hub, and then click Branding > Show Advanced Options.
   
   

4. Paste the copied code in the Header section.  

   Note: In the below code replace <GTM-ID> with your Google Tag Manager ID.

   <!-- Google Tag Manager -->
   <script>(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=
   'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
   })(window,document,'script','dataLayer','<GTM-ID>');</script>
   <!-- End Google Tag Manager -->

Configure Event Handlers at System Level

1. Login to your Hushly Account.
   
   

2. From the Left Nav Menu, click Setup > Settings. In the Tracking Section, paste any one of the following codes in the Event Handlers field.
   
   Important: Once the Event Handlers are configured at the System level it will apply to all Hubs.

   hushly('bind', 'content-view', function(options) {
       dataLayer.push({
           'event': 'hushly_content_view',
           'experience_name': options.experienceName,
           'stream_name': options.streamName,
           'asset_name': options.assetName
       });
   });
   
   hushly('bind', 'content-interaction', function(options) {
       dataLayer.push({
           'event': 'hushly_content_interaction',
           'experience_name': options.experienceName,
           'stream_name': options.streamName,
           'asset_name': options.assetName
       });
   });
   
   hushly('bind', 'invalid-form-submit', function(formData) {
       dataLayer.push({
           'event': 'hushly_invalid_form_submit',
           'experience_name': formData.experienceName,
           'stream_name': formData.streamName,
           'asset_name': formData.assetName
       });
   });
   
   hushly('bind', 'form-submit', function(formData) {
       dataLayer.push({
           'event': 'hushly_form_submit',
           'experience_name': formData.experienceName,
           'stream_name': formData.streamName,
           'asset_name': formData.assetName
       });
   });

   
   
   

Create Variables in your Google Tag Manager Account:

To create Variables in your Google Tag Manager Account follow the steps below:

1. On Google Tag Manager, go to Variables > Create New Variables.
    
2. Select the type - Data Layer Variable from the Choose Variable type window.
    
3. A side pop-up of Variable Configuration appears.
   
   Edit the Untitled Variable name to match the Variable you intend to track, for example- If it's for an Asset, then hushly_asset_name.
    
4. Enter the Data Layer Variable Name - for example - asset_name and click Save.
   Note: You can name the variables according to any custom variables you wish to track. 
5. Repeat steps 3-5 to create other Custom Variables.
   
   For example, for experience_name
   
   For stream_name
    
6. Next, go to Triggers > New. 
7. Edit the name, and click to choose a trigger type.
   
   Here, the Untitled Trigger is changed to Hushly Custom Event.
    
8. Select Custom Event as the Trigger type.
    
9. Enter hushly_* as the Event Name. Check the boxes for Use regex matching and trigger fires for All Custom Events, then click Save. 
    
10. To send the tracking of events from Google Tag Manager to Google Analytics 4 - Click on Tag > New.
     
11. Edit the Untitled Tag Name.
    
    For example, you can name it - Publish Hushly Events to GA4.
     
12. A Tag configuration window opens, Select the tag type of the configuration tag from the drop-down. When you configure the GA4 tag, it is listed in the drop-down.
     
13. The Tag Configuration window opens.
    
    Select {{Event}} variable from the Event Name drop-down field.
     
14. Add Event Parameters:
    Enter a Parameter Name and select the respected variables in the Value field. Add the created Custom variables as Parameters. Refer to the image above.
    
    
15. Skip the other settings and scroll to the Triggering section. 
16. Click on Choose a trigger to make the tag fire and select Hushly Custom Event. 
    
    Click Save. 
     
17. Finally, click Submit and then Publish.
    
     
18. You will have a Container Version Description pop-up, this is to make notes of any changes. You can add notes or Continue to publish even without it.