Google Analytics Integration

Modified on Wed, 10 Apr 2024 at 11:36 PM

Overview

The purpose of this document is to guide you in setting up the Google Analytics Event Tracking for Hushly Runtime Events.


Note: If you are using Google Analytics 4, please refer to this document. 


Prerequisites

  1. Google Analytics Code must be Installed on the Landing Page.

  2. Google Tracker should be Instantiated.

Tracked Events

Following Hushly events can be tracked via Google Analytics

  1. Content View.

  2. Content Interaction.

  3. Invalid Form Submit.

  4. Valid Form Submit.


Configure Event Handlers to Track Hushly Events in Google Analytics

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.

    Note: You could configure the Event Handlers using either gtag.js or analytics.js.

    Important: Event Handlers once configured at the System level will apply for all the Experiences and Hubs

    * gtag.js [The Global Site tag]:

    hushly('bind', 'content-view', function(options) {
        gtag('event', 'Content View', {
            'event_category': 'Hushly',
            'eventLabel': options.experienceName || options.streamName
        });
    });
    hushly('bind', 'content-interaction', function(options) {
        gtag('event', 'Content Interaction', {
            'event_category': 'Hushly',
            'eventLabel': options.experienceName || options.streamName
        });
    });
    hushly('bind', 'invalid-form-submit', function(formData) {
        gtag('event', 'Invalid Form Submit', {
            'event_category': 'Hushly',
            'eventLabel': formData.experienceName || formData.streamName
        });
    });
    hushly('bind', 'form-submit', function(formData) {
        gtag('event', 'Form Submit', {
            'event_category': 'Hushly',
            'eventLabel': formData.experienceName || formData.streamName
        });
    });


    * analytics.js [The Google Analytics tag]:

    hushly('bind', 'content-view', function(options) {
        var _hly_ga_cmd = 'send';
        var trackers = ga.getAll();
        if (trackers && trackers.length > 0) {
            _hly_ga_cmd = trackers[0].get('name') + '.send';
        }
        ga(_hly_ga_cmd, 'event', {
            'eventCategory': 'Hushly',
            'eventAction': 'Content View',
            'eventLabel': options.experienceName || options.streamName
        });
    });
    
    hushly('bind', 'content-interaction', function(options) {
        var _hly_ga_cmd = 'send';
        var trackers = ga.getAll();
        if (trackers && trackers.length > 0) {
            _hly_ga_cmd = trackers[0].get('name') + '.send';
        }
        ga(_hly_ga_cmd, 'event', {
            'eventCategory': 'Hushly',
            'eventAction': 'Content Interaction',
            'eventLabel': options.experienceName || options.streamName
        });
    });
    
    hushly('bind', 'invalid-form-submit', function(formData) {
        var _hly_ga_cmd = 'send';
        var trackers = ga.getAll();
        if (trackers && trackers.length > 0) {
            _hly_ga_cmd = trackers[0].get('name') + '.send';
        }
        ga(_hly_ga_cmd, 'event', {
            'eventCategory': 'Hushly',
            'eventAction': 'Invalid Form Submit',
            'eventLabel': formData.experienceName || formData.streamName
        });
    });
    
    hushly('bind', 'form-submit', function(formData) {
        var _hly_ga_cmd = 'send';
        var trackers = ga.getAll();
        if (trackers && trackers.length > 0) {
            _hly_ga_cmd = trackers[0].get('name') + '.send';
        }
        ga(_hly_ga_cmd, 'event', {
            'eventCategory': 'Hushly',
            'eventAction': 'Form Submit',
            'eventLabel': formData.experienceName || formData.streamName
        });
    });


Configure Event Handlers at Experience Level:


  1. Navigate to Experiences, select an Experience, and go to Settings > Advanced Settings.

  2. Paste any one of the below codes in the Event Handlers Field.

    Note: Make sure you replace the <experience-guid> with the actual guide of the Experience.

    * gtag.js [The Global Site tag]:

    hushly('bind', 'content-view', '<experience-guid>', function(options) {
        gtag('event', 'Content View', {
            'event_category': 'Hushly',
            'event_label': options.experienceName
        });
    });
    hushly('bind', 'content-interaction', '<experience-guid>', function(options) {
        gtag('event', 'Content Interaction', {
            'event_category': 'Hushly',
            'event_label': options.experienceName
        });
    });
    hushly('bind', 'invalid-form-submit', '<experience-guid>', function(formData) {
        gtag('event', 'Invalid Form Submit', {
            'event_category': 'Hushly',
            'event_label': formData.experienceName
        });
    });
    hushly('bind', 'form-submit', '<experience-guid>', function(formData) {
        gtag('event', 'Form Submit', {
            'event_category': 'Hushly',
            'event_label': formData.experienceName
        });
    });


    * analytics.js [The Google Analytics tag]:

    hushly('bind', 'content-view', function(options) {
        var _hly_ga_cmd = 'send';
        var trackers = ga.getAll();
        if (trackers && trackers.length > 0) {
            _hly_ga_cmd = trackers[0].get('name') + '.send';
        }
        ga(_hly_ga_cmd, 'event', {
            'eventCategory': 'Hushly',
            'eventAction': 'Content View',
            'eventLabel': options.experienceName
        });
    });
    
    hushly('bind', 'content-interaction', function(options) {
        var _hly_ga_cmd = 'send';
        var trackers = ga.getAll();
        if (trackers && trackers.length > 0) {
            _hly_ga_cmd = trackers[0].get('name') + '.send';
        }
        ga(_hly_ga_cmd, 'event', {
            'eventCategory': 'Hushly',
            'eventAction': 'Content Interaction',
            'eventLabel': options.experienceName
        });
    });
    
    hushly('bind', 'invalid-form-submit', function(formData) {
        var _hly_ga_cmd = 'send';
        var trackers = ga.getAll();
        if (trackers && trackers.length > 0) {
            _hly_ga_cmd = trackers[0].get('name') + '.send';
        }
        ga(_hly_ga_cmd, 'event', {
            'eventCategory': 'Hushly',
            'eventAction': 'Invalid Form Submit',
            'eventLabel': formData.experienceName
        });
    });
    
    hushly('bind', 'form-submit', function(formData) {
        var _hly_ga_cmd = 'send';
        var trackers = ga.getAll();
        if (trackers && trackers.length > 0) {
            _hly_ga_cmd = trackers[0].get('name') + '.send';
        }
        ga(_hly_ga_cmd, 'event', {
            'eventCategory': 'Hushly',
            'eventAction': 'Form Submit',
            'eventLabel': formData.experienceName
        });
    });


Configure Event Tracking at Hub Level:

You can also configure Event Tracking at a Hub Level.

  1. For a V2 Hub, Navigate to Hubs, select a Hub and then click Branding > Show Advanced Options.

  2. Paste the below code in the Header section.

    Note: You can get the below code from your Google Analytics account. Go to Admin > Tracking Info > Tracking Code or In the below code replace <Tracking ID> with your Google Analytics Tracking ID.

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=<Tracking ID>"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', '<Tracking ID>');
    </script>

3. For a V3 Hub, Navigate to Hubs, select a Hub and then click Custom Code >> paste the          code in the Code section and click Save

Important: When the user performs an action on the Stream's item the Event is tracked.

Track Content Download

Since the Content download happens on the Hushly website it is not possible to invoke the google analytics code directly. 

  1. From the Left Nav menu, click Setup > Field Management.

  2. Create a Custom Field to Track Google Analytics Identifier, Set the default value as {{cookies._ga}}

  3. Navigate to Setup > Settings, and scroll to Tracking Section:

    • Set the value for Tracked Cookies field as _ga.

    • Paste the following code in the Download Tracking Code field.

      Note: Please change the value of the "tid" variable to your Google Analytics Account id.

      <script> 
      var gaCookie = '{{lead_c.google_analytics_identifier}}'.split(".");
      var tid = 'XX-111091507-1',
          cid = gaCookie[2] + "." + gaCookie[3];
      var pageUrl = '{{lead_c.sourceUrl}}',
          eventCategory = 'Hushly',
          eventAction = 'Content Download',
          eventLabel = '{{widget_c.name_c}}'; 
      var trackingImgUrl = "http://www.google-analytics.com/collect?v=1&tid=" + tid + "&cid=" + cid + "&t=event&dl=" + pageUrl + "&ec=" + eventCategory + "&ea=" + eventAction + "&el=" + eventLabel; 
      var img = new Image(); 
      img.src = trackingImgUrl; 
      </script>



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article