Chaordic/Linx Impulse VTEX checkout tagging

README.md

Chaordic/Linx Impulse VTEX checkout tagging

Code to tracking VTEX checkout pages based on linx docs:

https://docs.linximpulse.com/docs/tagging-cart

https://docs.linximpulse.com/docs/tagging-checkout

https://docs.linximpulse.com/docs/tagging-all (User)

TIPS

• You need to change the variables apiKey and salesChannel accordingly to your store

• This code must run only in /checkout page but no in orderPlaced page

• To check if it's working you can search for "https://events.chaordicsystems.com/v7/events/views/cart" (or just "v7") in the network table:

At bottom you will find the body request, check if it's equal to your cart:

• window.linxImpulse.createEvent('linximpulse.navigation') is a event that must be triggered after navigate using SPA (without reload the page)

• If you do not have the user name you should not send the name key inside the user object

chaordic-vtex-checkout.js

$(window).load(function () {
  var apiKey = 'nome-loja';
  var salesChannel = '1'
  var orderFormTag = {}

  $(window).on('orderFormUpdated.vtex', function (e, orderForm) {
    var isUpdated = cartUpdatedHasBeenUpdated(orderFormTag, orderForm)
    orderFormTag = orderForm

    if (isUpdated) {
      createLinxMeta(orderForm);
    }
  })

  // this function verify if some product has been added, removed or changed the quantity
  // and call chaordic trigger event
  function cartUpdatedHasBeenUpdated(oldOrderForm, newOrderForm) {
    if (!oldOrderForm || !newOrderForm || !oldOrderForm.orderFormId) {
      //first load this will be triggered in other events
      return;
    }

    var oldItems = oldOrderForm.items
    var newItems = newOrderForm.items

    if (!oldItems || !newItems) {
      return;
    }

    if (oldItems.length !== newItems.length) {
      // obviously some item has changed
      return true
    }

    var someQuantityChanged = false;

    oldItems.forEach(function(item) {
      var newItem = newItems.find(function(newItem) { return item.id === newItem.id })

      if (!newItem || item.quantity !== newItem.quantity) {
        // if we do not find the item in the new orderform
        // or the quantity has been changed
        someQuantityChanged = true;
        return;
      }
    })

    return someQuantityChanged;
  }

  function isChaordicLoaded() {
    return !!document.querySelector(
      "[src='//suite.linximpulse.net/impulse/impulse.js']"
    );
  }

  function vtexjsReady(fn) {
    var vtexjsReady = setInterval(function () {
      if (vtexjs) {
        clearInterval(vtexjsReady);
        fn();
      }
    }, 200);
  }

  function getLinxUser() {
    if (!orderFormTag.userProfileId) {
      return null;
    }

    var userData = {
      id: orderFormTag.userProfileId,
      email: orderFormTag.clientProfileData.email,
      allowMailMarketing: !!orderFormTag.clientPreferencesData.optinNewsLetter
    }

    if (orderFormTag.canEditData && orderFormTag.clientProfileData.firstName && orderFormTag.clientProfileData.lastName) {
      userData.name = orderFormTag.clientProfileData.firstName + ' ' + orderFormTag.clientProfileData.lastName
    }

    return userData;
  }

  function addScript(file){
    // just for the first load
    var script = window.document.createElement("script");
    script.type = "text/javascript";
    script.setAttribute('data-apikey', apiKey);
    script.src = file;
    script.async = true;
    script.defer = true;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  function createLinxMeta() {
    var user = getLinxUser();
    var linxMeta = {
      salesChannel: salesChannel
    }

    if (user) {
      linxMeta.user = user;
    }

    switch (window.location.hash) {
      case "#/cart":
      case "#cart":
        linxMeta.page = "cart";
        linxMeta.items = orderFormTag.items.map(function (item) {
          return {
            pid: item.productId,
            sku: item.id,
            price: item.price / 100,
            quantity: item.quantity
          }
        });
        linxMeta.id = orderFormTag.orderFormId;
        break;
      default:
        linxMeta.page = "checkout";
    }

    window.linxMeta = linxMeta;

    if (!isChaordicLoaded()) {
      addScript("//suite.linximpulse.net/impulse/impulse.js");
    } else {
      //just for spa loadings/redirects
      window.linxImpulse.createEvent('linximpulse.navigation')
    }
  }

  window.addEventListener("hashchange", function() {
    createLinxMeta(orderFormTag)
  });

  vtexjsReady(function () {
    vtexjs.checkout.getOrderForm().then(function(orderForm) {
      orderFormTag = orderForm
      createLinxMeta(orderFormTag);
    })
  });
});