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