JS Based Event Tracking

JS Based Event Tracking

Overview

For certain on-page events, which do not involve a complete page load, the event can be tracked using JavaScript. Currently four such on-page events are supported for event-tracking:
  1. Tour/popup inquiry form viewed
  2. Tour/popup inquiry form submitted
  3. Contact form submitted
  4. Phone/call button clicked
Please note: Insert the Javascript snippet WITHOUT the <script> tag. The textboxes highlighted below are for JavaScript code, and NOT for HTML code..
To setup tracking codes for these events, navigate to Website > Advanced Settings > Scroll down to "JS Tracking Snippets" section.



Each JS snippet has a How to use section where you can view more details about what variable are available for use in your JS tracking snippet.

Setup event tracking for Google Analytics

For this, we have taken an example of "trip/popup inquiry-form submission" and "trip/popup inquiry-form viewed" events. Create a custom JavaScript event snippet and add it to the dedicated sections as shown in the screenshot below.
The event snippet added to track the inquiry submission is given below:
  1.     gtag('event', 'submit-inquiry-form', {
          'send_to': 'G-JTP8QS1GSX',
          'trip_id': data.trip.id,
          'device': data.device,
          'trip_name': data.trip.name
         });

By adding custom JS as mentioned above, you can pass additional data:
  1. Trip ID: The trip ID on which the enquiry was submitted will be displayed.
  2. Device: Indicates whether the form was submitted on a mobile or desktop device.
  3. Trip name: The name of the trip on which the enquiry was submitted will be displayed.
After this, navigate to the website and submit the tour/popup inquiry form. After that, navigate to the analytics dashboard, click on Reports > Real-time, where you can observe the real-time data.



Setup event tracking for Google Adwords

For this, we have taken an example of tracking the inquiry form submission. To track the conversion of an inquiry form submission, create a conversion action in Google Ads using the manual method.



After creating the conversion action, an event snippet will be generated that has to be pasted into the dedicated section without the <script> tag.



After configuring the JS event, navigate to Google Ads. The conversion action will be in an inactive state. Click on "Troubleshoot," where you will be redirected to the Google Tag Assistant page. Here, you can trigger the event to check if the conversion is sending the data using the Google Tag Assistant tool.
Once you submit the inquiry form, the conversion action will become active, and you can start recording the conversions.


Setup event tracking for Meta

Inquiry form submission

To track inquiry form submission, create a custom JS by following the support article: https://developers.facebook.com/docs/meta-pixel/implementation/conversion-tracking. You can then add the custom JS to the dedicated section.



After this, navigate to the website and submit the inquiry form. After some time, the conversion starts recording in the Meta Pixel.


Contact form submission

To track contact form submissions, create a custom JavaScript event snippet and add it to the dedicated section as shown in the screenshot below.
The example below will utilize the contact form data (such as the customer's name or email address) in the event payload, ensuring that it appears in the conversion reports.


The event snippet used is:
  1.     fbq('track', 'contact-form', {
          'email': data.form.email,
          'name': data.form.name
        });
Afterward, navigate to the website and submit the contact form to trigger the event. After submitting the contact form, navigate to the Meta account and verify the custom event. After some time, the conversion starts recording in the Meta pixel.


Also, you can verify by using Test Events. Click on 'Test Events', then click on 'Confirm your website’s events are set up correctly'. Add your domain, and click on 'Open website'.




    • Related Articles

    • Setting up Meta Pixel for conversion tracking

      Quick Overview Creating an event Installing pixel code to Vacation Labs Confirming that the Pixel is installed on the website Event setup Event testing Confirming that the event is being tracked Creating an event Login to your Meta business account ...

    • Setting up Google Ads conversion tracking

      You can use Google Ads conversion tracking to track actions that people take on your website after clicking one of your ads. Overview Creating a Conversion Action Setting up Google tag in Vacation Labs Testing that conversations are being tracked ...

    • Add a script/code to trigger on a specifc page

      The Advanced Settings of the website allow you to add a script/code that can be triggered on a specific page. For example a tracking script that must be triggered on any one tour page because its being promoted or you are running ads for it. You can ...

    • Accessing and Managing Search Settings

      Your Vacation Labs Pro Website Builder subscription gives you the capability to create unlimited pages on your website. To help your customers search for trips easily from the homepage, you can add a search bar on the homepage. Through the search ...

    • Managing Tour Page Sidebar

      The sidebar on the Tour Page allows you to display sections like TripAdvisor widget, Awards, Affiliations & Press Coverage, Other Tours, Other Collections. This helps the website visitor to know more about your Reviews, Awards and Press coverage, ...