Summary

Gingr's Customer Portal 2.0 lets you embed Google Tag Manager and Facebook Pixel in the customer-facing app. This feature is not available for the customer portal native apps. Gingr offers this feature, but you need a third-party web developer your business hires. The Gingr support and development teams cannot guide you through these instructions.

Important: The Customer App CSS field and Customer App JS field do not work in Customer Portal 2.0.

Before You Begin

You can use JavaScript events to trigger a conversion in Google AdWords, Facebook Pixel, and more. Google Tag Manager has three events:

• reservation_created: Gingr emits this when a reservation or appointment request is made.
• owner_created: Gingr emits this when a customer registers a new account.
• lead_created: Gingr emits this when a customer submits a lead form.

You need:

• A Google Tag Manager (GTM) account and a Google Analytics 4 (GA4) account
• A GTM container and your GTM ID
• Your measurement ID, usually starting with "G-". Find it in Google Analytics > Admin > Data Streams > Measurement ID.
• The events you want to track in GA4

Steps

Step 1: Create a GA4 Configuration Tag That Starts on All Pages

1. In your Google Tag Manager container, select Tags > New. Name your tag, such as "Google Tag G-Measurement_id".
2. Select Tag Configuration > Choose tag type > Google Tag.
3. Enter your GA4 Measurement ID in the Measurement ID field.
4. Under Triggering, select Add Trigger > Choose a trigger > Initialization - All Pages.

   

Step 2: Create a Custom HTML Tag

1. In your Google Tag Manager container, select Tags > New. Name your tag, such as "Custom HTML".
2. Select Tag Configuration > Choose tag type > Custom HTML.
3. For Triggering, choose All Pages. This inserts the tag when a page is viewed.
4. Paste this HTML code. Replace <measurement ID> with your measurement ID.

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

Step 3: Create a Custom Event Trigger

Before you create the custom event tag, create a custom trigger. This tells Google Tag Manager to activate when a specific event happens.

1. Go to Triggers > New and choose the Custom Event configuration.
2. Name the trigger "owner_created", "reservation_created", or "lead_created", based on the GTM event you are tracking.
3. Name the event "owner_created", "reservation_created", or "lead_created".
4. Set the trigger to fire on All Custom Events.

   

Step 4: Create an Event Tag

1. Go to the Tags section and select New. Name your tag, such as "owner_created".
2. Select Tag Configuration > Choose tag type > Google Analytics > Google Analytics: GA4 Event.
3. Enter your GA4 Measurement ID in the Measurement ID field.
4. For the trigger, select the custom event trigger you created, such as "owner_created".

   

If these are the only tags you created, your tags page looks like this:

Step 5: Set Up Gingr Admin

1. In Gingr, go to Admin » Advanced Settings » Custom Configurations.
2. In the Customer app footer section, paste the code below.
3. Replace GTM-ID with your GTM ID, usually starting with GTM-.
4. Replace the event listener with the event you are listening for: reservation_created, owner_created, or lead_created.
5. Select outside the field to save your changes.

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

<script>
document.addEventListener('owner_created', function(e) {
window.dataLayer.push({
event: 'owner_created',
ownerData: e.detail
});
});
</script>

Test the Setup

1. In GTM, select Preview in the top banner. A page asks for the domain to connect to.
2. Enter your customer portal URL, usually https://<app>.portal.gingrapp.com. Select Connect.
3. When your customer portal opens in a new tab or window, log in as a customer.
4. Select More on the menu, then Contact us.
5. Fill out the form and submit it.
6. Go back to the Tag Manager tab. Its icon flashes between an empty and blue tag icon. You see something like this on the left side:

   

7. Select the event. You see something like this on the right side. Look for the GA4 Event you created in the Tags Fired section.

   

The user session and event also show in your Google Analytics Realtime Report.

Go Live

When you are satisfied, select Submit in GTM and publish the container. Changes may take a few moments to take effect between your app and Google.

Related Articles

• Custom CSS & JavaScript Topic Outline
• JavaScript Events Emitted Reference
• What Is the Meta Pixel Example for JavaScript Events? Reference