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:

Shared Tag: This tag loads ftltag.js, making the ftltag method available for use in other event-specific tags.
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.
  function ftltag() {
    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>