Using Google Tag Manager and Meta Pixel in the Customer Portal

document.addEventListener('reservation_created',function(e){
// add conversion code here
// e.detail.reservation_ids is an object which contains the animal ID & reservation IDs of what was just created
},false);

document.addEventListener('owner_created',function(e){
// add conversion code here
// e.detail is an object which contains the user supplied data that was submitted on the form.
},false);

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. 

Note, 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.  

Note, 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.

Prerequisites

• An existing Google Tag Manager (GTM) and Google Analytics 4 (GA4) account
• An existing GTM container and knowledge of the GTM ID
• Awareness of your measurement ID (typically prefixed with “G-” and found in GA4)
• Identification of the specific event(s) you intend to track in GA4, for this tutorial, we will focus on lead_created events

Create a Custom HTML Tag

The provided GTM snippets for website integration are not applicable to Gingr since gtag.js is not loaded. Instead, we will utilize GTM to insert custom HTML into a page after GTM itself has loaded.

To accomplish this, generate a new tag within the container with the tag type set as Custom HTML. The following is the HTML code to be used:

 

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

To establish a connection between the container and Google Analytics 4 (GA4), it is necessary to generate a GA4 Configuration tag. This tag serves as the configuration for any subsequent GA4 tags.

When initiating a new tag, opt for the 'Google Analytics: GA4 Configuration' type. It will present a text field where you should input your Measurement ID. Similar to the custom HTML mentioned earlier, set the trigger for this tag to be “All Pages.”

Generate a Custom Event Trigger

Prior to crafting the final tag, it's essential to establish a custom trigger. This is necessary to instruct Google Tag Manager (GTM) to activate when a specific event occurs. Navigate to Triggers -> New, and opt for the 'Custom Event' configuration.

Given that we intend to respond to 'lead_created' events, designate this as the “Event Name”. You can keep it set to “All Custom Events”.

Upon completion, your trigger section should resemble the following, assuming this is the sole trigger you've created:

Generate an Event Tag

For each event you wish to monitor, you must create a new trigger and tag.

This time, the tag type should be 'Google Analytics: GA4 Event.' Configure the tag by assigning the previously created config tag and set the event_name to 'lead_created.' For the trigger, select the custom event trigger you generated earlier.

At this stage, assuming the tags outlined in this guide are the sole ones you've generated, your tags page should appear as follows:

Inserting GTM JavaScript Code in the Business Portal

As an administrator, log in to your business portal and access Admin -> Advanced Settings -> Custom Configurations. Within the "Customer app footer" section, paste the following code snippet:

JS

<!-- Google Tag Manager -->
(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');
<!-- End Google Tag Manager -->
document.addEventListener('reservation_created',function(e){
ga('send','event','Reservations','created');
},false);

Replacing GTM-ID with your actual GTM ID (usually prefixed with GTM-) and click outside of the field to ensure that the changes are saved.

Testing

To verify the functionality, within GTM, click on “Preview” in the top banner. This action will redirect you to a page prompting you to specify the domain for connection. Enter your customer portal URL (typically https://<app>.portal.gingrapp.com) and select “Connect.”

Your customer portal will open in a new tab or window. Proceed to log in as a customer, navigate to “More” on the menu, and then select “Contact us.” Complete the form and submit it. Now, return to the Tag Manager tab (indicated by an icon flashing between an empty and blue tag icon) where you entered your customer portal URL. You should observe something similar to the following on the left side:

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

Crucially, ensure that the GA4 Event created earlier appears in the “Tags Fired” section. Additionally, check your Google Analytics Realtime Report to confirm the user session and the presence of the event in the listings.

Going Live

When you are confident with the testing results, proceed to GTM and click “Submit,” followed by publishing the container. Please note that changes may take a few moments to become effective between your app and Google.

 

Meta Pixel Example

Below is an example outlining the code you'll want to add to the Customer app footer field on the System-wide Settings page to notify Meta Pixel when a customer requests a reservation in Gingr. 

Note, you'll first need to configure Meta Pixel (https://www.facebook.com/business/tools/meta-pixel). 

Note, you'll want to replace MY_META_PIXEL_ID in the below example with the Pixel ID provided to you by Facebook. Alternatively, you can visit your Meta Pixel Dashboard to retrieve the code specific to your account. 

 

<!-- Meta Pixel Code -->
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','//connect.facebook.net/en_US/fbevents.js');

fbq('init','MY_META_PIXEL_ID');

<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=MY_META_PIXEL_ID&ev=Reservation&noscript=1"/>
</noscript>

<!-- End Meta Pixel Code -->

document.addEventListener('reservation_created',function(e){fbq('track','Lead',{});},false);