How To Set Up Google Tag Manager and Google Analytics in the Customer Portal

Introduction

This is a set up guide to use GA in Customer Portal 2.0. Instructions below are for triggering events from the Portal that get sent to GTM and are viewable in GA4.

This assumes an already existing Google Tag Manager (GTM) and Google Analytics v4 (GA4) account. UA differences are at the end of this.

Notice:  This functionality is offered by Gingr, but in many cases requires the help of a 3rd party web developer hired by your business. Our support and development teams are not able to provide guidance for implementing the following instructions.

Requirements

• Existing GTM and GA4 account
• Existing GTM container and knowing the GTM ID
• Knowing your measurement ID (found in GA4; generally prefixed with “G-”)
• Knowing which event(s) you wish to track in GA4
  • For the purpose of this tutorial we’ll act on lead_created events

GTM

The bulk of the effort will be in GTM. On success you should see events in GA4’s Real-time Report.

Create a Custom HTML Tag

The snippets provided by GTM to work in a site does not apply to Gingr as gtag.js is never loaded. Instead we will leverage GTM inserting custom HTML into a page once GTM itself is loaded.

To do this, create a new tag in the container. The tag type will be Custom HTML. Below is the HTML:

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

Replace <measurement ID> with your measurement ID.

For Triggering, choose “All Pages” so this gets inserted when a page is viewed.

GA4 Configuration Tag

To link the container with GA4 we need to create a GA4 Configuration tag. This will be used for any GA4 tags that get created.

When creating a new tag, choose the Google Analytics: GA4 Configuration type. It’ll give you a text field to put in your Measurement ID, which you will add in here. Just like the custom HTML above set the trigger to be “All Pages”.

Create a Custom Event Trigger

Before we create the last tag, we need to create a custom trigger. This is so we can tell GTM to fire when an event happens. Go to Triggers -> New and the configuration will be Custom Event.

Since we are going to act on lead_created events this will also be the “Event Name”. You can leave it on “All Custom Events”.

When done, this is what your trigger section should look like if this is the only trigger you created:

Create an Event Tag

You’ll need to create a new trigger and tag for each event you want to track.

The tag type this time will be Google Analytics: GA4 Event. Set the Configuration Tag to the config tag you created earlier, and set the event_name to be lead_created. For the trigger choose the custom event trigger you just created.

By this point, assuming the tags mentioned in this article are the only ones you created, your tags page should look like this:

Adding GTM JavaScript to the Portal

Log in to your business portal as an administrator and go to Admin -> Advanced Settings -> Custom Configurations. Under “Customer app footer” put the following snippet in:

<!-- 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 -->

document.addEventListener('lead_created', function (e) {
gtag({event: 'lead_created'});
}, false); 

Replacing GTM-ID with your actual GTM ID (usually prefixed with GTM-) and click out of the field for it to save.

Testing

To test that this works, in GTM click “Preview” in the top banner on the page. This will take you to a page asking you for the domain to connect to. Put in your customer portal URL (usually https://[subdomain].portal.gingrapp.com) and click “Connect”.

Your customer portal will open in a new tab or window. Log in as a customer and click on “More” on the menu and then “Contact us”. Fill out the form and submit. Now go back to the Tag Manager tab (it’s icon will be flashing between an empty and blue tag icon) where you put in your customer portal URL, and you should see something like this on the left side:

On the right side after you select the event you should see something like this:

The important thing is to see the GA4 Event created earlier in the “Tags Fired” section.

In your Google Analytics Realtime Report you should also see the user session and the event listed.

Going Live

Once satisfied go to GTM and click “Submit” then publish the container. Changes may take a few moments to take effect between the your app and Google.

Google Analytics Legacy (UA)

While Gingr endorses using GA4 over UA due to Google sunsetting the older platform, below are the changes needed to make the above work for UA.

References to Measurement ID

Where you would use a measurement ID in the above steps use the UA tracking ID instead.

Universal Analytics Events Tag

The tag type for this will be Google Analytics: Universal Analytics.

You will still need to create an event trigger as above.

Change the “Track Type” to Events

Fill out Category and Action (this is up to the user as it will be what is shown in the Events viewer in GA).

You will need to create a Google Analytics Settings variable, which can be done from within the dialog. You will need to provide your tracking ID.

It is advised to have “Non-Interaction Hit” as false.