Custom CSS & JavaScript

Gingr allows you to embed custom CSS & JavaScript into the customer-facing application. This allows you to do many things, but the most common use cases are customized color & fonts and embed advertising campaign trackers. 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.

This article includes:

• Adding custom CSS & JavaScript
• JavaScript events emitted
• Listening for Custom JavaScript Events
• Google Tag Manager (AdWords/Analytics) Example
• Facebook Pixel Example

How to: Add Custom CSS & JavaScript.

To add custom CSS or JavaScript, navigate to Left-hand Navigation: Admin » Custom Configurations. Locate the Customer app CSS and Customer app JS/Customer app footer fields and copy/paste your code into the respective box. Once finished, click the green Save button at the bottom of the page. 

Gingr automatically includes the <style> tag in the Customer App CSS Field, as well as a <script> tag in the Customer App JS field, so there's no need to include that yourself.  

If you are using provided code that contains a <script> tag, then you'll want to paste it into the Customer App Footer field on the Custom Configurations page. This field does not include a <script> tag automatically.

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 JS or Customer app footer field on the Custom Configurations page. Below is an example listener function for the reservation_created event. 

Example:

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

Google Tag Manager (AdWords/Analytics) 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>

<!-- Facebook Pixel Code -->
<script>
!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');
</script>

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


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