Google Tag Manager integration | Inseanq Help Center

Google Tag Manager (GTM) allows you to add, manage, and track multiple marketing and analytics tags on your website. Tags help track specific actions or events on a website, such as page views, button clicks, e-commerce transactions, etc.

Tracking methodology

The widget is installed via an iframe. If the website and the widget have the same GTM container and GA4 resource, Google Analytics will record views for two separate sites - fleetsite.com and app.inseanq.com - when a page with the widget is viewed. Simple events tracked are sent from the widget, so they are linked with the widget view rather than the website view.

Therefore we recommend creating two separate GTM accounts: one for the main website and another for the widget. A separate GTM for the widget includes a tag to transmit event data to the main website. The GTM account for the website includes a tag to replicate the widget events as if they were triggered on the website.

Setting up a separate GTM account for the widget

Create a GTM account for the widget
- How to create an account: GTM Account Creation
- Enter the GTM ID of the created account under the Widget settings module in Inseanq
Set up triggers for necessary events
- Path: Triggers - New - Custom Event
- Configuration: enter the event name as listed without changing the case or adding symbols. Set up trigger for each event you need to track
- List of events:

Event Name	Description
`select_trip`	Widget display
`select_cabin`	Cabin selection page
`extras`	Additional services selection page
`info`	Guest information input page
`finish`	Booking created
`purchase`	Booking confirmation for eCommerce

3. Configure variables

Path: Variables - User-Defined Variables - New - Data Layer Variable
Configuration: add four variables that characterize the transaction (created booking).

Variable Name	Value
`ecommerce.currency`	Currency
`ecommerce.items`	Items
`ecommerce.transaction_id`	Transaction ID
`ecommerce.value`	Transaction Value

4. Configure event-sending tag: Inseanq widget - events sender

Path: Tags - New - Custom HTML

Add the code below, replacing the example website with the your website’s real URL:

<script>
  try {
      var postObject = JSON.stringify({
        event: {{Event}}
      });
      parent.postMessage(postObject, 'https://example.com');
} catch(e) {
  window.console && window.console.log(e);
}
  </script>

Trigger: choose all previously configured event triggers except purchase (configure separately as outlined below).

5. Configure eCommerce data-sending tag - Inseanq widget - purchase sender

Path: Tags - New - Custom HTML

Add the code below, replacing the example website with the your website’s real URL:

<script>
  try {
      var postObject = JSON.stringify({
        event: 'purchase',
        ecommerce_transaction_id: {{ecommerce.transaction_id}},
        ecommerce_value: {{ecommerce.value}},
        ecommerce_currency: {{ecommerce.currency}},
        ecommerce_items: {{ecommerce.items}}
      });
      parent.postMessage(postObject, 'https://example.com');
} catch(e) {
  window.console && window.console.log(e);
}
  </script>

Trigger: set the purchase event as the trigger.

Configuring the Main Website GTM Account

Set up triggers for events to track
- Path: Triggers - New - Custom Event
- Configuration: enter the event name as listed without changing the case or adding symbols
- List of events:

Event Name	Description
`select_trip`	Widget display
`select_cabin`	Cabin selection page
`extras`	Additional services selection page
`info`	Guest information input page
`finish`	Booking created
`purchase`	Booking confirmation for eCommerce

Set up a trigger for each event to track

2. Create variables for GA4 eCommerce

Path: Variables - New - Data Layer Variable
Configuration: add four variables that characterize the transaction (created booking).

Variable Name	Value
`ecommerce.currency`	Currency
`ecommerce.items`	Items
`ecommerce.transaction_id`	Transaction ID
`ecommerce.value`	Transaction Value

3. Configure widget events listener tag: GA4 events listener Inseanq widget

Path: Tags - New - Custom HTML

Add the code:

<script type="text/javascript">
(function(window) {
    addEvent(window, 'message', function(message) {
      try{
      var data = JSON.parse(message.data);
      var dataLayer = window.dataLayer || (window.dataLayer = []);
      if (data.event == 'purchase') {
        dataLayer.push({
          'event': data.event,
          ecommerce: {
            transaction_id: data.ecommerce_transaction_id,
            value: data.ecommerce_value,
            currency: data.ecommerce_currency,
            items: data.ecommerce_items
            }
         });
        } else if (data.event) {
        dataLayer.push({
          'event': data.event
        });
      }
      }catch(e){}
    });

    // Cross-browser event listener
    function addEvent(el, evt, fn) {
      if (el.addEventListener) {
        el.addEventListener(evt, fn);
      } else if (el.attachEvent) {
        el.attachEvent('on' + evt, function(evt) {
          fn.call(el, evt);
        });
      } else if (typeof el['on' + evt] === 'undefined' || el['on' + evt] === null) {
        el['on' + evt] = function(evt) {
          fn.call(el, evt);
        };
      }
    }
  })(window);
</script>

Trigger: All pages

4. Configure GA4 events transmission tag: GA4 events Inseanq widget

Path: Tags - New - Google Analytics - GA4 Event
Configuration:
- Measurement ID: Google Analytics Measurement Id of the main website, ex: G-XXXXXXXXXX.
- Event Name: {{Event}}
Trigger: choose all previously configured event triggers except purchase (configure separately as outlined below).

5. Set up GA4 eCommerce purchase tag: GA4 ecommerce purchase

Path: Tags - New - Google Analytics - GA4 Event
Configuration:
- Measurement ID: Google Analytics Measurement Id of the main website, ex: G-XXXXXXXXXX.
- Event Name: purchase
- Event Parameters: enter the variables configured earlier:

Event Parameter	Value
currency	{{`ecommerce.currency`}}
items	{{`ecommerce.items`}}
transaction_id	{{`ecommerce.transaction_id`}}
value	{{`ecommerce.value`}}

More settings:
- Ecommerce = Send Ecommerce data
- Data source= Data Layer
Trigger: set the purchase event as the trigger

Additional tracking: Waiting list requests

Once the main Widget tracking flow is configured, you can also track Waiting list events. To do this, add the following events to both GTM accounts configured for the Widget integration:

Event Name	Description
`waitlist_opened`	Waiting list page
`waitlist_request_created`	Waiting list request created

The waitlist_opened event is triggered once the Guest navigates to the ‘Get on a Waiting list’ page.

The waitlist_request_created event is triggered only after the Waiting list request is successfully created.

Add the events to the existing configuration in both sections of this guide as described below.

Configuring the Widget GTM container

1. Set up triggers for the Waiting list events

Path: Triggers - New - Custom Event
Configuration: enter the event name as listed without changing the case or adding symbols
Set up a separate trigger for each event:

Event Name	Description
`waitlist_opened`	Waiting list page
`waitlist_request_created`	Waiting list request created

2. Add the new triggers to the existing event-sending tag

Path: Tags - Inseanq Widget - events sender
Add the waitlist_opened and waitlist_request_created triggers to the tag
Do not change the tag code

The events are transmitted to the main website using the existing Widget event-sending configuration.

Configuring the Main Website GTM Account

1. Set up triggers for the Waiting list events

Path: Triggers - New - Custom Event
Configuration: enter the event name as listed without changing the case or adding symbols
Set up a separate trigger for each event:

Event Name	Description
`waitlist_opened`	Waiting list page
`waitlist_request_created`	Waiting list request created

2. Add the new triggers to the existing GA4 events transmission tag

Path: Tags - GA4 events Inseanq widget
Add the waitlist_opened and waitlist_request_created triggers to the tag.
Do not change the Event Name configuration. It should remain {{Event}}.

No changes to the GA4 events listener Inseanq widget tag, eCommerce variables, or purchase tags are required.

Publish both GTM containers after the configuration is complete.