npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@everymundo/airmodules-event-datalayer

v1.7.0

Published

Package for airmodules

Downloads

1,794

Readme

📝 Table of Contents

🧐 Overview

The Tracking Package enables you to measure views and engagement across your applications. This documentation provides implementation instructions and reference materials geared towards a developer audience.

To track a new application, developers construct an event object for each event they wish to track and utilize this npm package to send the event. Once sent, the tracking package formats each event object according to the specifications outlined in the emDataStandards and pushes it to a dataLayer object. Subsequently, both customers and EveryMundo have the ability to leverage a tag manager to access the data layer values and transmit events to an Analytics account.

🏁 Getting started with the Tracking Package

Follow these simple steps to quickly integrate the Tracking Package into your project for seamless event tracking.

Step 1: Download the npm Package

Install @everymundo/airmodules-event-datalayer by using npm. Open your terminal and run:

npm install @everymundo/airmodules-event-datalayer

Step 2: Import the Formatter Function into the Project

In your project file where you plan to implement event tracking, import the formatter function. Add the following line at the top of your file:

import { formatter } from "@everymundo/airmodules-event-datalayer"

Step 3: Construct the Event Object Based on Vertical

Create an event object that captures the relevant information for the specific event you want to track. Ensure that the object follows the required structure and contains essential details related to the event. Refer to the details below for more information.

const eventObject = {
  event: 'viewable_impression',
  module: 'em-booking-popup',
  eventAction: 'viewable_impression',
  actionLabel: '',
  airlineIataCode: 'UL',
  journeyType: 'ONE_WAY',
  originAirportIataCode: 'CMB',
  destinationAirportIataCode: 'SIN',
  route: 'CMB>SIN',
  currencyCode: 'LKR',
  totalPrice: 5.21,
  totalPriceUSD: '',
  fareClass: 'ECONOMY',
  departureDate: '2021-03-13',
  returnDate: '2021-06-14',
  daysUntilFlight: 25,
  tripLength: 93,
  isFlexibleDates: '',
  discountCode: '',
  deeplinkSiteEdition: '',
  miles: '',
  timestamp: '2021-02-16T00:00:00.000Z',
  url: 'https: //www.srilankan.com/en-lk/',
  passenger: [
    {
      count: 1,
      adultCount: 1,
      youngAdultCount: '',
      childCount: '',
      infantInLapCount: '',
      infantInSeatCount: ''
    }
  ],
  page: [
    {
      siteEdition: 'en-LK',
      countryIsoCode: 'LK',
      languageIsoCode: 'en',
      pageTypeName: 'CUSTOM_PAGE'
    }
  ],
  lodging: [
    {
      cityCode: 'SIN',
      name: 'Intercontinental',
      startDate: '2021-03-13',
      endDate: '2021-03-20',
      roomCount: 2,
      tripLength: 7,
      starRating: 5
    }
  ],
  moduleId: '',
  tagName: ''
}

Step 4: Call the Function Based on Vertical

After constructing the event tracking object, use the appropriate function based on the tenant type (vertical) to format and process the event. Pass the event object as the parameter to ensure accurate tracking.

// For Vertical Airlines
formatter.formatAirlines(eventObject);

// For Vertical Hospitality
formatter.formatHotels(eventObject);

// For Vertical Events
formatter.formatEvents(eventObject);

These functions are designed to handle specific verticals and ensure proper formatting of the event object. Here's a brief explanation of the process:

  • Handling Missing Fields: If the event object is missing values for certain keys, the respective keys will be assigned empty values during the formatting process.

  • Handling Null Values: Null values in the event object will be converted to an empty string during the formatting process.

  • Handling Multiple Values: If 'eventExperience' contains multiple values (e.g., "The Lounge," "Player Pod"), the function will format them to "MULTIPLE."

  • Pushing to the dataLayer: After formatting, the resulting data will be pushed to the dataLayer, making it ready for further processing and analysis by analytics tools.

Ensure you choose the correct function based on your application's vertical to maintain consistency in data formatting and tracking. Customize the event object and parameters as needed for your specific tracking requirements.

📓 Constructing the Event Object

Events let you measure user interactions on your app; for example, you can measure when someone, clicks on a button or interacts with a filter. The data from events is used to create reports.

Step 1: Select the Empty Event Object by Vertical

Identify the appropriate empty event object template based on the vertical or category of the event you intend to track. Different verticals may require specific information to be captured.

const eventObject = {
  event: '',
  module: '',
  eventAction: '',
  actionLabel: '',
  airlineIataCode: '',
  journeyType: '',
  originAirportIataCode: '',
  destinationAirportIataCode: '',
  route: '',
  currencyCode: '',
  totalPrice: 0,
  totalPriceUSD: '',
  fareClass: '',
  departureDate: '',
  returnDate: '',
  daysUntilFlight: 0,
  tripLength: 0,
  isFlexibleDates: '',
  discountCode: '',
  deeplinkSiteEdition: '',
  miles: '',
  timestamp: '',
  url: '',
  passenger: [
    {
      count: 1,
      adultCount: 1,
      youngAdultCount: '',
      childCount: '',
      infantInLapCount: '',
      infantInSeatCount: ''
    }
  ],
  page: [
    {
      siteEdition: '',
      countryIsoCode: '',
      languageIsoCode: '',
      pageTypeName: ''
    }
  ],
  lodging: [
    {
      cityCode: '',
      name: '',
      startDate: '',
      endDate: '',
      roomCount: 0,
      tripLength: 0,
      starRating: 0 
    }
  ],
  carRentals: [
    {
      provider: '',
      brand: '',
      model: ''
  }
 ],
  moduleId: '',
  tagName: ''
}
const eventObject = {
  event: '',
  module: '',
  eventAction: '',
  actionLabel: '',
  tenantCode: '',
  tenantType: '',
  regionName: '',
  countryCode: '',
  cityName: '',
  propertyCode: 0,
  propertyName: '',
  currencyCode: '',
  totalPrice: 0,
  totalPriceUSD: 0,
  startDate: '',
  endDate: '',
  daysUntilBooking: 0,
  tripLength: 0,
  roomAccesibility: true,
  timestamp: '',
  url: '',
  guest: [
    {
      count: 0,
      adult: 0
    }
  ],
  room: [ 
    { 
      count: 0, 
      type: '' 
    } 
  ],
  page: [
    {
      siteEdition: '',
      countryIsoCode: '',
      languageIsoCode: '',
      pageTypeName: ''
    }
  ],
}
const eventObject = {
  event: '',
  module: '',
  eventAction: '',
  actionLabel: '',
  tenantCode: '',
  tenantType: '',
  regionName: '',
  countryCode: '',
  cityName: '',
  propertyCode: 0,
  propertyName: '',
  currencyCode: '',
  totalPrice: 0,
  totalPriceUSD: 0,
  startDate: '',
  endDate: '',
  daysUntilBooking: 0,
  tripLength: 0,
  roomAccesibility: true,
  timestamp: '',
  url: '',
  guest: [
    {
      count: 0,
      adult: 0
    }
  ],
  room: [ 
    { 
      count: 0, 
      type: '' 
    } 
  ],
  page: [
    {
      siteEdition: '',
      countryIsoCode: '',
      languageIsoCode: '',
      pageTypeName: ''
    }
  ],
}

Step 2: Decide Which Events to Track in the 'event' and 'eventAction' Fields

Determine the key events you want to track and assign them to the 'event' and 'eventAction' fields. These fields define the type of user interaction and the specific action taken and take identical values. For example:

const eventObject = {
  event: 'viewable_impression',
  module: 'em-booking-popup',
  eventAction: 'viewable_impression',
  ...
};

Adjust the values of 'event' and 'eventAction' to accurately reflect the nature of your tracked events. Refer to Types of Events below for more information.

Step 3: Set Up Event Parameters

The event object includes several parameters to provide detailed context to a specific event for better analysis. For instance:

const eventObject = {
  event: 'viewable_impression',
  module: 'em-booking-popup',
  eventAction: 'viewable_impression',
  actionLabel: '',
  airlineIataCode: 'UL',
  journeyType: 'ONE_WAY',
  originAirportIataCode: 'CMB',
  destinationAirportIataCode: 'SIN',
  route: 'CMB>SIN',
  currencyCode: 'LKR',
  totalPrice: 5.21,
  ...
};

Refer to Event Object Parameters below for a detailed explanation of each parameter, and which ones are required.

Types of events

[!NOTE] Automatically collected events are events that are collected by default. These events include:

  • Pageviews: A pageview is recorded when a user loads a new page
  • Viewable impressions: A viewable impression is recorded when a module is displayed on the user's screen.

Recommended events are events that you implement, but that have predefined names and parameters. These events unlock existing and future reporting possibilities. The following is a list of recommended events that you can track using the tracking package:

| Event | Description | |-------------------------|-------------------------------------------------------------------------------------------------------| | viewable_impression | An element is seen on the user's browser | | fsi | Flight search initiation | | open_booking_popup | Popup clicked | | select_origin | Origin (From) field updated | | select_destination | Destination (To) field updated | | select_departure_date | Departure date field updated | | select_return_date | Return date field updated | | select_journey_type | Journey type field updated | | select_miles | User changes the miles limit | | expand_form | User expands the form in the booking popup | | collapse_form | User collapses form in the booking popup | | sort | The sort toggle is used on the FC | | more_deals | The user clicks to see more deals than the ones displayed in the FC | | select_tab | User selects tab in pricing modules | | filter_airlines | User filter for selected airlines (STAR) | | select_budget | A budget was selected | | select_fare_class | User changes fare class in the module. This includes branded classes such as "Basic Economy", "Main Cabin", "Economy Light", etc. | | collapse_histogram | User collapses the histogram | | select_month | User selects the month in the histogram or calendar | | expand_flight | User expands flight information in the flight schedule module | | reset_filter | Clear button clicked | | toggle_farelist | User interacts with the toggle of the farelist modules | | select_map_destination | Map destination clicked | | selected_travel_interest| A travel interest was selected | | select_interest | User selects travel interest (Tracking Package) | | click_out | User clicks on one link of the content module | | read_article | User clicks on an article of the content module | | select_location | User performs a search in the bus directory module | | search | A search was initiated | | select_status | Status is updated in the route status tracker module | | select_stops | User filters for the number of stops in the map module | | select_article | An article was selected | | select_resident_status | Resident status was selected | | no_fares_available | The FC does not have fares to display | | insert_first_name | First name field updated | | insert_last_name | Last name field updated | | insert_email | Email field updated | | insert_phone_number | Phone number field updated | | subscribe | Subscription option selected | | enter_promo_code | Promo code field updated |

| Event | Description | |-----------------------|-------------------------------------------------------| | viewable_impression | An element is seen on the user's browser | | search_initiation | Search initiation | | open_booking_popup | Popup clicked | | more_deals | The user clicks to see more deals than the ones displayed in the FC | | select_origin | Origin (From) field updated | | select_trip_length | User selects stay length of the trip | | sort | The sort toggle is used on the FC | | select_rating | Hotel rating filter is used | | select_destination | Destination (To) field updated | | select_budget | A budget was selected | | reset_filter | Clear button clicked | | select_night | Number of nights filter is updated | | select_property | Hotel property updated | | select_start_date | Hotel check-in date updated | | select_end_date | Hotel check-out date updated | | select_room_guest | Hotel guests field updated | | select_accessibility | User marks the accessibility check box in the module | | select_redemption | User selects redemption as payment method | | select_stay_length | User selects stay length of the trip | | select_offer | Special offer is selected in the low fares calendar | | no_fares_available | The FC does not have fares to display | | insert_first_name | First name field updated | | insert_last_name | Last name field updated | | insert_email | Email field updated | | insert_phone_number | Phone number field updated | | subscribe | Subscription option selected | | enter_promo_code | Promo code field updated |

| Event | Description | |-----------------------|-------------------------------------------------------| | viewable_impression | An element is seen on the user's browser | | search_initiation | Search initiation | | open_booking_popup | Popup clicked | | select_date | Event date updated | | select_session | Event sessions field updated | | select_category | Event category selected | | select_experience | Event experience field updated | | select_location | Event location field updated | | select_budget | A budget was selected | | sort | Sorting option selected | | reset_filter | Clear button clicked | | no_fares_available | The FC does not have fares to display | | insert_first_name | First name field updated | | insert_last_name | Last name field updated | | select_origin | Origin (From) field updated | | insert_email | Email field updated | | insert_phone_number | Phone number field updated | | subscribe | Subscription option selected | | enter_promo_code | Promo code field updated |

Custom events are events that you define. Make sure to only create custom events when no other events work for your use case. Custom events do not show up in most standard reports and require a custom request for meaningful analysis. (we give guidelines in case nothing on our list is appropriate)

To track a custom event, simply add in the event object an event action name and/or module name that is not on the recommended list.

The event object must contain the following properties:

  • event and eventName: The name of the event. Both fields have the same value.
  • module: The name of the module.

For example, the following event object would track a custom event called "product_detail_clicked" for a new module ':

const eventObject = {
  event: 'product_detail_clicked',
  module: '',
  eventAction: 'product_detail_clicked',
  ...
  }

[!NOTE] Guidelines for tracking custom events

When tracking custom events, it is important to follow the following guidelines:

  • Use descriptive event names. This will help you to easily identify and analyze your event data.
  • Avoid tracking too many custom events. This can make your event data difficult to analyze.
  • Only track custom events that are important to your business. This will help you to focus on the most important events and to get the most out of your tracking data.

Event Object Parameters

This section provides a detailed explanation of the parameters used in the event object, along with their examples, definitions, and whether they are required.

  • The parameters marked as required need to be inluded in all events.

  • The viewable-impression events will only collect the required parameters.

  • The interaction events, such as select-departure-date, will only populate the relevant parameters to the event itself and what has already been filtered in the module.

| Parameter | Example | Definition | Required | |------------------------------------------|---------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------| | event | T_123456 | Name of the event performed | Yes | | module | em-booking-popup | Name of the module | Yes | | eventAction | viewable_impression | Name of the event action used in GA Reports | Yes | | actionLabel | ... | Populated based on what was selected in the user interaction. See details below. | Optional | | tenantCode | HDI | Tenant Code | Yes | | tenantType | hotel | Tenant Type (Hotel, Airline, Event) | Yes | | currencyCode | USD | The currency (in 3-letter ISO 4217 format) of the price | Yes | | totalPrice | 399.37 | The total price for the reservation or ticket, including applicable taxes, shipping, etc | Yes | | totalPriceUsd | 530.62 | The total price for the reservation or ticket in USD, including applicable taxes, shipping, etc. | Yes | | startDate | 2022-04-01 | Date of check-in | Yes | | endDate | 2022-04-07 | Date of check-out | Yes | | timestamp | 2021-02-16T17:41:43.200Z | Timestamp of the event sent | Yes | | url | https://www.example.com | Full URL in lowercase (without query parameters to avoid collecting personal data by mistake) | Yes | | adultCount, youngAdultCount, childCount | 1 | Amount of adult/young adult/child passengers | Yes | | count | 3 | Amount of guests for a specific category | Yes | | siteEdition | en-HK | Site edition combination of ISO codes for language and country. The country reflects the market | Yes | | countryIsoCode | HK | Country code (in 2 letter codes from ISO 3166-1) | Yes | | languageIsoCode | en | Language ISO 629-1 code | Yes | | tagName* | | Name given by Standard Fare Modules or Front Components. *Required if there is a name or tag associated with the module other than the module name. E.g. A module that only displays miles and has been named "Miles" | No | | discountCode | AFFBFAN | Discount promotion code | Optional | | pageTypeName | CUSTOM_PAGE | Name of the type of page template | No |

| Parameter | Example | Definition | Required | |-----------------------------------------|--------------------------|-------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------| | airlineIataCode | AA | IATA identifier for the airline | Yes | | journeyType | ONE_WAY | Trip type (ROUND_TRIP, ONE_WAY, MULTI_CITY) | Yes | | originAirportIataCode | SFO | IATA identifier for the departure/origin airport | Yes | | destinationAirportIataCode | JFK | IATA identifier for the arrival/destination airport | Yes | | route | SFO>JFK | Route of the trip from origin to destination | Yes | | currencyCode | USD | The currency (in 3-letter ISO 4217 format) of the price | Yes | | totalPrice | 399.37 | The total price for the flight ticket, including applicable taxes, shipping, etc | Yes | | totalPriceUsd | 530.62 | The total price for the flight ticket in USD, including applicable taxes, shipping, etc. | Yes | | fareClass | ECONOMY | Fare class type (ECONOMY, BUSINESS, PREMIUM_ECONOMY, FIRST) | Yes | | departureDate | 2022-04-01 | Date of departure | Yes | | returnDate | 2022-04-07 | Date of return | Yes | | daysUntilFlight | 25 | Amount of days from the current date to the departure date | Yes | | tripLength | 5 | Length of stay / trip | Yes | | isFlexibleDates | true | True/false value if flexible dates are selected for flights | Yes | | discountCode* | AFFBFAN | Discount promotion code | Optional | | deeplinkSiteEdition | en-HK | Site edition combination of ISO codes for language and country provided in the URL | Yes | | miles | 25790 | Flight distance in miles | Yes | | timestamp | 2021-02-16T17:41:43.200Z | Timestamp of the event sent | Yes | | url | | Full URL in lowercase (without query parameters to avoid collecting personal data by mistake) | Yes | | adultCount, youngAdultCount, childCount | 1 | Amount of adult/young adult/child passengers | Yes | | infantInLapCount | 1 | Amount of infant passengers in lap | Yes | | infantInSeatCount | 1 | Amount of infant passengers in seat | Yes | | count | 3 | Amount of passengers for a specific category | Yes | | siteEdition | en-HK | Site edition combination of ISO codes for language and country. The country reflects the market | Yes | | countryIsoCode | HK | The country code (in 2-letter codes from ISO 3166-1) | Yes | | languageIsoCode | en | The language ISO 629-1 code | Yes | | cityCode | SIN | The city code for the selected property (in 2-letter codes from ISO 3166-1) | Yes | | name | Intercontinental | Name of the selected property. | Yes | | startDate | 2021-03-13 | Date of check-in | Yes | | endDate | 2021-03-20 | Date of check-out | Yes | | roomCount | 2 | Amount of rooms selected | Yes | | tripLength | 7 | Length of stay/trip | Yes | | starRating | 5 | An official rating for the property | Yes | | moduleId | XADPLIK7890 | Unique ID used for the module. Only required for DPA | Yes - for DPA modules only | | tagName | | Name given to Standard Fare Modules (SFM) / Front Components (FC) | Yes - if there is a name or tag associated with the module other than the module name. E.g., A module that only displays miles and has been named "Miles". | | provider | Hertz | Name of the car rental company | Optional - Required only if there is car rental information available | | brand | BMW | Make of the rental car | Optional - Required only if there is car rental information available | | model | 530i | Model of the rental car | Optional - Required only if there is car rental information available |

| Parameter | Example | Definition | Required | |------------------------|----------------------------------|--------------------------------------------------------------------------------------------------------|----------| | emcid | T-123456 | Unique identifier | Yes | | tenantCode | HDI | Tenant Code | Yes | | tenantType | hotel | Tenant Type (Hotel, Airline, Event) | Yes | | module | open-booking-popup-abstract | Name of the event | Yes | | actionLabel | open-booking-popup | Name of the event action | Yes | | regionName | North America | Name of the region for the selected property (North America, South America, East Asia...) | Yes | | countryCode | US | The country code for the selected property (in 2 letter codes from ISO 3166-1) | Yes | | cityName | Miami | Name of the city for the selected property (Miami, Orlando, Tampa...) | Yes | | propertyCode | HYATT9015479 | Code of the selected property (Hotel code, event code...) | Yes | | propertyName | HolidayInn-Miami | Name of the selected property. e.g Name of the Hotel (Holiday Inn - Miami, Hyatt Regency Hong Kong...) | Yes | | currencyCode | USD | The currency (in 3-letter ISO 4217 format) of the price. | Yes | | totalPrice | 399.37 | The total price for the reservation or ticket, including applicable taxes, shipping, etc | Yes | | totalPriceUsd | 530.62 | The total price for the reservation or ticket in USD, including applicable taxes, shipping, etc. | Yes | | startDate | 2022-04-01 | Date of check in | Yes | | endDate | 2022-04-07 | Date of check out | Yes | | daysUntilBooking | 25 | Amount of days from the current date to the startDate (Check-in date) | Yes | | tripLength | 5 | Length of stay / trip | Yes | | roomAccesibility | false | Room accessibility requirement | Yes | | timestamp | 2021-02-16T17:41:43.200Z | timestamp of the event sent | Yes | | url | https://www.holidayinn.com/miami | Full url in lowercase (without query parameters to avoid collecting personal data by mistake) | Yes | | adult | 1 | Amount of adult guests | Yes | | child | 1 | Amount of child guests | Yes | | count (in guest array) | 3 | Amount of guests for a specific category | Yes | | count (in room array) | | Amount of rooms selected | Yes | | type | Suite | Room type | Yes | | pageTypeCode | CI | Page Type Code: HP, CICO, FCI, TCI, CICI, COCI, COCO, FCO, TCO, EXT, CP, 404, SM, BS, FS, FA | Yes | | siteEdition | en-HK | Site edition combination of ISO codes for language and country. The country reflects the market | Yes | | countryIsoCode | HK | The country code (in 2 letter codes from ISO 3166-1) | Yes | | languageIsoCode | en | The language ISO 629-1 code | Yes | | tagName | | Name given to Standard Fare Modules (SFM) / Front Components (FC) | Yes - if there is a name or tag associated with the module other than the module name. E.g., A module that only displays miles and has been named "Miles". | | discountCode | AFFBFAN | Discount promotion code | Yes | | pageTypeName | CUSTOM_PAGE | Name of the type of page template | Yes |

| Parameter | Example | Definition | Required | |-----------------------------------------|-----------------------------------|-------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------| | tenantCode | HDI | Tenant Code | Yes | | tenantType | hotel | Tenant Type (Hotel, Airline, Event) | Yes | | | event | search_initiation | Name of the event | Yes | | module | open-booking-popup-abstract | Name of the interacted module | Yes | | eventAction | search_initiation | Name of the event action used in Google Analytics Reports. It is the same value as the “event” field. | Yes | | actionLabel | Book Now | Name of the event action | Yes | | eventName | Semifinal | Name of the Event | Yes | | eventLocation | Laver Arena | Location for the selected Event | Yes | | eventSession | Night | Time of the Event session | Yes | | eventExperienceCategory | Ticket Only | Name of the selected experience category | Yes | | eventNameFilter | Semifinal | Name of the filtered Event | Yes | | eventLocationFilter | Laver Arena | Name of the filtered Event location | Yes | | eventSessionFilter | Night | Name of the filtered session | Yes | | eventExperienceCategoryFilter | Ticket Only | Name of the filtered experience category | Yes | | eventExperienceFilter | MULTIPLE | Types of Event experiences selected | Yes | | currencyCode | USD | The currency (in 3-letter ISO 4217 format) of the price. | Yes | | totalPrice | 399.37 | The total price for the reservation or ticket, including applicable taxes, shipping, etc | Yes | | totalPriceUsd | 530.62 | The total price for the reservation or ticket in USD, including applicable taxes, shipping, etc. | Yes | | startDate | 2022-04-01 | Date of check in | Yes | | endDate | 2022-04-07 | Date of check out | Yes | | timestamp | 2021-02-16T17:41:43.200Z | timestamp of the event sent | Yes | | url | https: //www.srilankan.com/en-lk/ | Full url in lowercase (without query parameters to avoid collecting personal data by mistake) | Yes | | adultCount, youngAdultCount, childCount | 1 | Amount of adult/young adult/child passengers | Yes | | count | 3 | Amount of guests for a specific category | Yes | | siteEdition | en-HK | Site edition combination of ISO codes for language and country. The country reflects the market | Yes | | countryIsoCode | HK | The country code (in 2 letter codes from ISO 3166-1) | Yes | | languageIsoCode | en | The language ISO 629-1 code | Yes | | tagName* | | Name given by Standard Fare Modules or Front Components. | Yes - if there is a name or tag associated with the module other than the module name. E.g., A module that only displays miles and has been named "Miles". | | discountCode | AFFBFAN | Discount promotion code | Yes | | pageTypeName | CUSTOM_PAGE | Name of the type of page template | Yes |

How to populate the actionLabel parameter

The 'actionLabel' serves as a descriptive label, tracking what was specifically selected based on the event. For instance, when the event is 'select-interest,' the 'actionLabel' might capture values like 'snorkeling.'

| Event | Action Label | |-----------------------|--------------| | select-budget | 1000 | | select-interest | snorkeling | | select-destination | MIA | | select-departure-date | 2023-04-01 |

  • Note that for select-destination and select-departure-date the values will also have to be included in the relevant event object parameters.

Examples

const eventObject = {
  event: 'viewable_impression',
  module: 'em-booking-popup',
  eventAction: 'viewable_impression',
  actionLabel: '',
  airlineIataCode: 'UL',
  journeyType: 'ONE_WAY',
  originAirportIataCode: 'CMB',
  destinationAirportIataCode: 'SIN',
  route: 'CMB>SIN',
  currencyCode: 'LKR',
  totalPrice: 5.21,
  totalPriceUSD: '',
  fareClass: 'ECONOMY',
  departureDate: '2021-03-13',
  returnDate: '2021-06-14',
  daysUntilFlight: 25,
  tripLength: 93,
  isFlexibleDates: '',
  discountCode: '',
  deeplinkSiteEdition: '',
  miles: '',
  timestamp: '2021-02-16T00:00:00.000Z',
  url: 'https: //www.srilankan.com/en-lk/',
  passenger: [
    {
      count: 1,
      adultCount: 1,
      youngAdultCount: '',
      childCount: '',
      infantInLapCount: '',
      infantInSeatCount: ''
    }
  ],
  page: [
    {
      siteEdition: 'en-LK',
      countryIsoCode: 'LK',
      languageIsoCode: 'en',
      pageTypeName: 'CUSTOM_PAGE'
    }
  ],
  lodging: [
    {
      cityCode: 'SIN',
      name: 'Intercontinental',
      startDate: '2021-03-13',
      endDate: '2021-03-20',
      roomCount: 2,
      tripLength: 7,
      starRating: 5
    }
  ],
  carRentals: [
    {
        provider: Hertz,
        brand: BMW,
    model: 530i
    }
  ],
  moduleId: '',
  tagName: '',
}
const eventObject = {
  event: 'viewable_impression',
  module: 'em-booking-popup-abstract',
  eventAction: 'viewable_impression',
  actionLabel: '',
  tenantCode: 'UL',
  tenantType: '',
  regionName: 'North America',
  countryCode: 'US',
  cityName: 'Miami',
  propertyCode: 105565,
  propertyName: 'N/a',
  currencyCode: 'USD',
  totalPrice: 900.55,
  totalPriceUSD: 900.55,
  startDate: '2022-04-01',
  endDate: '2022-04-07',
  daysUntilBooking: 25,
  tripLength: 4,
  roomAccesibility: true,
  timestamp: '2021-02-16T17:41:43.200Z',
  url: 'https:  //www.hyatt.com/en/miami',
  guest: [
    {
      count: 1,
      adult: 1
    }
  ],
  room: [ 
    { 
      count: 1, 
      type: '' 
    } 
  ],
  page: [
    {
      siteEdition: 'en-LK',
      countryIsoCode: 'LK',
      languageIsoCode: 'en',
      pageTypeName: 'CUSTOM_PAGE'
    }
  ]
}

  const eventObject = {
    'event': 'search_initiation',
    'module': 'em-booking-popup-abstract',
    'eventAction': 'search_initiation',
    'actionLabel': null,
    'tenantCode': 'ETA',
    'eventName': 'Semifinal',
    'eventLocation': 'Laver Arena',
    'eventSession': 'Night',
    'eventExperienceCategory': 'Ticket Only',
    'eventExperience': 'The Lounge',
    'eventNameFilter': 'Semifinal',
    'eventLocationFilter': 'Laver Arena',
    'eventSessionFilter': 'Night',
    'eventExperienceCategoryFilter': 'Ticket Only',
    'eventExperienceFilter': 'MULTIPLE',
    'currencyCode': 'LKR',
    'totalPrice': null,
    'totalPriceUSD': null,
    'startDate': '2021-03-13',
    'endDate': '2021-03-14',
    'timestamp': '2021-02-16T17:41:43.200Z',
    'url': 'https: //www.srilankan.com/en-lk/',
    'passenger': [{
        'count': 1,
        'adultCount': 1,
        'youngAdultCount': null,
        'childCount': null
    }],
    'page': [{
        'siteEdition': 'en-LK',
        'countryIsoCode': 'LK',
        'languageIsoCode': 'en',
        'pageTypeName': 'CUSTOM_PAGE'
    }],
}

🔨 Testing the Tracking Implementation

[!NOTE] Tracking Implementation Options:

Understand that legacy modules may employ the Tracking Library (TL), Tracking Package (TP), or both in their implementation. The focus should be on having an "airmodule" data layer for each user interaction, ensuring events are collected in Google Analytics 4 (GA4).

To ensure the proper integration with the Tracking Package, follow these steps to effectively test the event object:

  1. Check the Event Object

Inspect the event object by typing tp_debug=true in the browser console. This will allow you to view the event object and identify any issues. This feature is available for implementations of the tracking package version 1.4.3 and above. You can check the Tracking Package version by typing tp_v in the console.

Additional note on verifying search_initiation events:

In addition to the steps above, before performing the search, run this in the console to avoid redirection to the search results page:

window.onbeforeunload = function (e) { e = e || window.event; return ''; }

That will prompt a popup to appear asking if you want to change pages. Just click "Cancel" and you should be able to see the details.

  1. Inspect the Data Layer

Interact with the modules as users would and observe the corresponding data layer events in the console. To inspect the formatted result, open your browser's console and type "dataLayer." This action will reveal the structured data layer, allow