Google Analytics 4 Integration

Modified on Thu, 11 Apr 2024 at 06:00 AM

Overview

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

Prerequisites

Google Analytics Code must be Installed on the Landing Page.
Google Tracker should be Instantiated.

Tracked Events

Following Hushly events can be tracked via Google Analytics

Content View.
Content Interaction.
Invalid Form Submit.
Valid Form Submit.

Install the Google tag (gtag.js) in Hubs

Install the Tag using the Google Tag Manager

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

Install the Tag directly

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

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>

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.

Configure Event Handlers to Track Hushly Events in Google Analytics

Configure Event Handlers at System Level

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 by using either gtag.js or analytics.js.
Important: Event Handlers once configured at the System level would apply for all the Experiences and 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
    });
});

Configure Event Handlers at Experience Level:

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

Paste any one of the below codes in the Event Handlers Field.
Note: Make sure you replace the <experience-guid> with the actual guid of the Experience.

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

Track Content Download

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

From the Left Nav menu, click Setup > Field Management.
Create a Custom Field under Lead Fields to Track Google Analytics Identifier, Set the default value as {{cookies._ga}}

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 url = new URL('https://www.google-analytics.com/g/collect');
var searchParams = url.searchParams;
searchParams.set('v', '2');
searchParams.set('tid', tid);
searchParams.set('cid', cid);
searchParams.set('t', 'event');
searchParams.set('dl', '{{lead_c.sourceUrl}}');
searchParams.set('dt', document.title);
searchParams.set('en', 'hushly_content_download');
searchParams.set('ep.stream_name', '{{stream_c.name}}');
searchParams.set('ep.experience_name', '{{widget_c.name_c}}');
searchParams.set('ep.asset_name', '{{asset_c.name}}');

var img = new Image();
img.src = url.toString();
</script>