Using Google Tag Manager and Facebook Pixel in Customer Portal 2.0

Donny K.
Donny K.

Overview: What are we talking about?

Gingr's Customer Portal 2.0 allows you to embed Google Tag Manager and Facebook Pixel into the customer-facing application. This feature is not available for the Gingr for Pet Parents Mobile App. This functionality is offered by Gingr, but 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.

 

IMPORTANT! Unlike the legacy portal, there is no need to wrap the code in <script></script> tags as it is already done for you. Also, the Customer App CSS Field and Customer App JS field are non-functional in Customer Portal 2.0.

 

This article includes:

JavaScript events emitted

JavaScript events can be used to trigger a conversion in Google AdWords, Facebook Pixel etc. 

  • reservation_created - This event is emitted when a reservation or appointment request has been made
  • owner_created - This event is emitted when a customer registers a new account
  • lead_created- This event is emitted when a customer submits a lead form

 

Listening for Custom JavaScript Events

You'll want to add your code that listens for custom JavaScript events in the Customer app footer field on the Custom Configurations page. Below is an example listener function for the reservation_created event. 

Example:

Js
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);

 

 

Js
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);

 

 

Google Tag Manager (AdWords/Analytics) Example

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.

 

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);

 

 

Facebook 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 Facebook Pixel when a customer requests a reservation in Gingr. 

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

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

 

Js
<!-- Facebook 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_FB_PIXEL_ID');

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

<!-- End Facebook Pixel Code -->
document.addEventListener('reservation_created',function(e){fbq('track','Lead',{});},false);

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Comments

1 comment

  • Comment author
    Vincent Tack

    Hi all,
    I have successfully setup GTM and made it work with GA4 and our digital ads platforms.

    One thing that would be very valuable is to be able to grab more information about a booking upon the 'reservation_created' event. Mainly product info, quantity and purchase value. This would really be helpful for us to improve our digital ads. Is this something that can be made available?

    Cheers

    0

Please sign in to leave a comment.