Custom HTML on Book Form

Ann Karako

The Contact link on the Book Form opens up a pop-up box, so I can't track clicks on the link via a destination URL. Is there a way to access the link html so as to include an event tracking code on the link itself?

Tristan Brotherton

Hi Ann,

You could probably do this with custom Javascript. Depending on what product you are using for tracking, it may allow you to specify and ID to "watch" for clicks.

Ann Karako

TI'm trying to use Google Analytics to track this as an "event." They do this via some html added to the link code, so they can "notice" when a click has occurred. And if I could have access to the link html, that would be easy for me -- but I don't know if there is a way for me to get to it. I'm not familiar with javascript, but I'm willing to learn. Where/how do I enter custom javascript to affect this particular link?

Tristan Brotherton

Hi @Ann-Karako I'm no Google Analytics wizard, just to set expectations!

But essentially what we'd want to do is:

Set a "listener" using jQuery for the class (.myvr-inquire-btn) which is the element that opens the contact form.
Write code for google analytics that gets fired when that listener is fired.

The code google analytics wants is documented here:

You'd want that in a jQuery wrapper that was tied to the ID of the contact modal. We have special classes on each of these links, such as in this case: .myvr-inquire-btn something like this (documentation):

$( ".myvr-inquire-btn" ).click(function() {
  // Your google analytics code here

});

Ann Karako

@Tristan-Brotherton OK, thanks, right now that's a bit above my knowledge level, lol. I'm more of an HTML girl. But I'll see if I can study up and make something work. Thanks!

Tristan Brotherton

Here's a list of all our classes for tracking:

Class	Function
`.myvr-book-btn`	Booking actions
`.myvr-inquire-btn`	Inquiry actions

Ann Karako

@Tristan-Brotherton Aweome! Thanks!

Tristan Brotherton

@Ann-Karako It's really just finding out exactly what Google Analytics tracking code you want to call with JavaScript. I can help you with the rest...

Ann Karako

@Tristan-Brotherton Oh, OK. That would be great. I'll get back to you.

Ann Karako

@Tristan-Brotherton Hi Tristan. I think I have the code we need to put onto the site at the .myvr-inquire-btn class. The code should look like this

ga('send', {
hitType: 'event',
eventCategory: 'Inquiry',
eventAction: 'Click',
eventLabel: 'InquiryClick'
});

Can you insert that for me and let me know when it's done? It would be VERY helpful for us to have this information. Thanks so much!

Tristan Brotherton

Hi Anne,

If you want that on your page you'll need to add it as custom Javascript. See the help article here

You'll also need to use something such as jQuery to link your code to the element you want, as per my example above. At the moment from looking at your code, I see nothing that ties it to the inquiry button - ( .myvr-inquire-btn )

Finally once you've figured out all that - Don't forget to add the <script> tags!

Although this is not really my area, an educated guess at getting this all to work might be:

<script type='javascript'>
$( ".myvr-inquire-btn" ).click(function() {
     ga('send', {
     hitType: 'event',
     eventCategory: 'Inquiry',
     eventAction: 'Click',
     eventLabel: 'InquiryClick'
     })
});
</script>