Skip to content
Fitle

Google Tag Manager

This section explains how to set up Google Tag Manager (GTM) to accomplish the integration of events. Specifically, we will cover the cart and transaction_end events, which are essential for monitoring user actions on product and checkout pages.

The setup involves adding two types of code snippets to your pages:

  1. Shared Tag: This tag loads ftltag.js, making the ftltag method available for use in other event-specific tags.
  2. Event-Specific Tags: One tag tracks when a product is added to the cart (cart event), and another captures purchases made during checkout (transaction_end event).

This method ensures consistent tracking with minimal setup, making it an efficient choice for event tracking. Below are the detailed steps for implementation.

Loading ftltag.js

Create a tag that fires on both the product and checkout pages.

<script>
  // This array temporarily stores events until the script finishes loading.
  window.ftldataLayer = window.ftldataLayer || [];
  // Do not push events directly to the array. Once the script is loaded, the ftltag function will be replaced and will send events directly.
  window.ftltag = window.ftltag || function() {
    ftldataLayer.push(arguments);
  }


  ftltag('config', '<client_id>');


  var ftlEl = document.createElement('script');
  ftlEl.async = true;
  ftlEl.type = 'module';
  ftlEl.src = "https://recommender.fitle.com/ftltag.js?_=" + new Date().getTime();
  document.getElementsByTagName('head')[0].appendChild(ftlEl);
</script>

Your setup should resemble the following:

Fitle tag setup on GTM

Capturing the Cart Event

Create a tag that fires when a product is added to the cart. Refer to the cart event for the cart event format.

<script>
  ftltag('event', 'cart', {
    product_id: 'ID_PRODUCT',
    size: 'PRODUCT_SIZE'
  });
</script>

Example:

Fitle capture add to cart example for GTM

Capturing the Purchase Event

Create a tag that fires when a purchase is successfully completed. Refer to the transaction_end event for the purchase event format.

<script>
  ftltag('event', 'transaction_end', {
    order_id: '',
    products: [PRODUCTS_LIST],
    total_price: ''
  });
</script>

Example:

Fitle capture purchase example for GTM

References