Deprecated - Event Tracking

Please ignore this page, this is the old way to do event tracking Use this one instead, following the instructions in the README file: https://hospitality.amaext.tools/bitbucket/projects/GP/repos/event-tracking/browse

In theme/bottom.html add:

theme/bottom.html

<script src="https://www.travelclick-websolutions.com/asset-galaxy/js/event-tracking.min.js?v{{website.version}}"></script>
<!-- requires jQuery -->
<script>if (window.GalaxyEventTracking) GalaxyEventTracking.init();</script>

GalaxyEventTracking requires jQuery, so jQuery needs to be already loaded and available on the $ variable.

HTML Setup

Logo

Add js-galaxy-logo class to all logo wrapper you want to track.

Back top button

If your website contain a back top button, check if it has the href #top or fix it.

Footer

Add the CSS class js-galaxy-footer on all footer containers.

To check if this is working, in the console of the browser, you should see something similar to this when you click on a link in the footer:

GalaxyEventTracking.events.switchLanguage({languageId: 'en'})

Example of event in the dev tools

Book now buttons

This applies only to hotel, rooms and offers book now button. Add the CSS class js-galaxy-book-body

<!-- Example inside a loop -->
<a href="{a.booking_engine_url}" target="_blank" 
class="js-galaxy-book-body" 
data-module="offer" data-title="{htmlentities(a.name)}">
    __@@Book now@@__
</a>


<!-- Example inside a detail page, you have the double {{ }} -->
<a href="{{item.booking_engine_url}}" target="_blank" 
class="js-galaxy-book-body" 
data-module="offer" data-title="{{htmlentities(item.name)}}">
    __@@Book now@@__
</a>

Second part (not a priority for now, can be done in a second step) Also add data-module and data-title

For "book now" inside a map infowindow, use the CSS class js-galaxy-book-maps instead.

Javascript Setup

Lead Form

When the form is submitted (this needs to be after form validation), add $(this).trigger('GalaxyEventForm');

Example

$('.js-form').on('submit', function(e) {
    e.preventDefault();

    $(this).trigger('GalaxyEventForm'); // HERE IS THE NEW LINE TO ADD
    /* Your existing code to send the form to Galaxy */
});

If your form is a RFP, add a data-type="RFP" attribute on your form tag:

<form class="js-form" data-type="RFP">
  <label for="exampleInput">Email address</label>
  <input id="exampleInput" type="email">
  <button type="submit">Submit</button>
</form>

Language toggle / Language switcher

This one can be done in 2 different ways

HTML method

If you are using a link, please add to the link the CSS class js-galaxy-language and the data attribute language containing the short code of the language.

<!-- example -->
<a  href="{cms.getLangUrl($item)}" 
    class="js-galaxy-language"
    data-language="{item.name_short}"
>{item.name_full}</a>

Javascript method

If you are handling the language select in JS (with a select for example)

This should be triggered ONLY When the users changes his language. Don't forget to replace 'en' by the new language. Please contact xo7 on Slack if you are not sure

/* Do this in the function where the user changes the language of the page */
/* replace "en" by a variable containing the targeted language */
$(document).trigger('GalaxyEventSwitchLanguage', {
    language: 'en' // TODO replace language by the new selected language
})