Introduction

Below is an example outlining the code you'll want to add to the Customer app footer field on the Custom Configurations page to notify Google Tag Manager when a customer requests a reservation in Gingr. 

Reference: You'll first need to configure Google Tag Manager (https://tagmanager.google.com). The below example assumes you have created a Tag called Reservations. If you want to use a different tag, replace Reservations and created in the example below with your desired settings.

Reference: You'll want to replace MY_GTM_ID in the below example with the GTM- ID provided to you by Google. Alternatively, you can visit tagmanager.google.com -> Admin -> Install Tag Manager to retrieve the code specific to your account.

Example

<!-- Google Tag Manager -->
<script async="" src="https://www.googletagmanager.com/gtm.js?id=MY_GTM_ID"></script>
<!-- End Google Tag Manager -->


<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=MY_GTM_ID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<script>
document.addEventListener('reservation_created', function (e) { 
     ga('send', 'event', 'Reservations', 'created');
}, false);
</script>

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

Notice:  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:

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:

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://<app>.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.

Related Resources

• Custom CSS & JavaScript Topic Outline
• Add Custom CSS & JavaScript How-To
• JavaScript Events Emitted Reference
• Listen for Custom JavaScript Events Reference
• Facebook Pixel in JavaScript Events Reference