Collecting Tangiblee Performance Metrics – Tangiblee

Overview

The purpose of this document is to specify how to setup analytics, in order to track Tangiblee performance on a client website.

Once performance tracking has been configured and tested, Tangiblee team can provide ongoing performance results showing the value that Tangiblee delivers to the client.

Performance metrics consist of 2 parts:

Metrics from the Product Details Page (PDP)
Order Tracking

Performance metrics can be configured by Tangiblee team or by your team, depends on which type of integration you chose.

Semi-Managed

With this option, we'll provide you with the initial code for tracking metrics on PDP and Order Tracking. You host this code and can update transaction variables in case data layer changes.

Example of mapping code on PDP:

<script>
 //...assuming you already configured CTA
 window.tangibleeAnalytics = window.tangibleeAnalytics || function() {
   (window.tangibleeAnalytics.q = window.tangibleeAnalytics.q || []).push(arguments);
 };
 window.tangibleeAnalytics('setAnalyticsPlugin', 'InfoPortalAnalytics', {});
 window.tangibleeAnalytics('setAnalyticsPlugin', 'GoogleAnalytics', {
   trackingId: 'UA-XXXXXXXX-01'
 });
</script>
<script async src="https://cdn.tangiblee.com/integration/3.1/tangiblee.min.js"></script>

Example of mapping code for checkout page:

<script>
  window.tangibleeAnalytics = window.tangibleeAnalytics || function() {
    (window.tangibleeAnalytics.q = window.tangibleeAnalytics.q || []).push(arguments);
  };
  window.tangibleeAnalytics('trackOrder', {
    currency: 'USD', //order currency
    items: [
    {
      sku: 'MRC12EQ', //order line sku
      name: 'Maracuya', //order line name
      qty: 2, //order line quantity
      price: 5 //order line price per item
    }]
  });
</script>
<script async src="https://cdn.tangiblee.com/analytics/1.0/ta.min.js"></script>

Managed

With this option, collecting PDP metrics included in tangiblee-bundle.min js, so all you need is to include 1 line script:

<script async src="https://cdn.tangiblee.com/integration/3.1/managed/www.tangiblee-integration.com/revision_1/variation_original/tangiblee-bundle.min.js"></script>

Please note: this is not your Integration Snippet, but an example for the sake of this guide. Your Tangiblee point of contact will share an Integration Snippet specifically for your website during the Onboarding Process.

For more details check this article

To start collecting order data, we need to get information from you (details are here), then all you need is to include 1 line script on your checkout page:

<script async src="https://cdn.tangiblee.com/analytics/1.0/managed/www.tangiblee-integration.com/revision_1/variation_original/ta-bundle.min.js"></script>

Please note: this is not your Integration Snippet, but an example for the sake of this guide. Your Tangiblee point of contact will share an Integration Snippet specifically for your website during the Onboarding Process.

Self-Service

To collect metrics from PDP, first of all, you need to declare tangibleeAnalytics object (assuming you already configured CTA):

window.tangibleeAnalytics = window.tangibleeAnalytics || function() {
    (window.tangibleeAnalytics.q = window.tangibleeAnalytics.q || []).push(arguments);
};

In case of A/B test you should also configure the variation name (Tangiblee is a default value):

window.tangibleeAnalytics('setVariation', 'Tangiblee Black Button');

Now you can start to configure analytics.

All analytics logic split into plugins. Every plugin responsible for its provider and should be configured using a method called setAnalyticsPlugin.

There are 2 main analytics plugins at the moment:

1. InfoPortalAnalytics - this analytics provider sending data to our portal https://info.tangiblee.com

EXAMPLE:

We don't have any config for this provider so it's very easy to setup:

window.tangibleeAnalytics('setAnalyticsPlugin', 'InfoPortalAnalytics', {});

2. Google Analytics - This is a GA provider (analytics.js).

EXAMPLE:

window.tangibleeAnalytics('setAnalyticsPlugin', 'GoogleAnalytics', {
    trackingId: 'UA-XXXXXXXX-XX',
    inPageAnalytics: false,
    trackerName: 'tangiblee',
    useCustomerTrackingId: false,
    googleAnalyticsObject: false,
    ecommerceTracking: true,
    enhancedEcommerce: false,
    forceGaScriptInjecting: false,
    customTangibleeDimension: 1,
    customWidgetDimension: 2,
    customWidgetSessionDimension: 3,
    customTangibleeSessionDimension: 4,
    customTangibleeUserDimension: 5
});

As you can see, there are many parameters here, but only one is required (trackingId):
trackingId - ga account ID. Required parameter.
googleAnalyticsObject - can be string or function which return object. Default value 'ga', which means we are using window['ga'].
forceGaScriptInjecting - if there is no analytics.js on the page you can force to inject it by setting this flag to true.
ecommerceTracking - if order tracking enabled - set this flag to true. True by default.
enhancedEcommerce - if we need to use enhanced commerce - set this to true. False by default.
inPageAnalytics - if this flag false we create our own ga tracker, otherwise using client's tracker.
trackerName - ga tracker name (tangiblee by default). If we are using client's tracker we should specify which tracker to use.
userCustomerTrackingId - use this flag when customer's tracking id on our tracker is needed
customTangibleeDimension - customTangibleeUserDimension - when we are using client's tracker, we should ask them to create our 5 CDs and share indexes with us, then we should set up them in config.

NOTE: you can setup a few GA trackers as well, for example, send data to our and your own tracker at the same time:

window.tangibleeAnalytics('setAnalyticsPlugin', 'GoogleAnalytics', {
    trackingId: 'UA-XXXXXXXX-01',
    ecommerceTracking: false
});

window.tangibleeAnalytics('setAnalyticsPlugin', 'GoogleAnalytics', {
    trackingId: 'UA-XXXXXXXX-02',
    inPageAnalytics: true,
    trackerName: '',
    useCustomerTrackingId: false,
    ecommerceTracking: false,
    customTangibleeDimension: 16,
    customWidgetDimension: 17,
    customWidgetSessionDimension: 18,
    customTangibleeSessionDimension: 19,
    customTangibleeUserDimension: 20
});

NOTE: Order Tracking for plugins with inPageAnalytics==true is skipped (to avoid sending it twice to client's GA).

Order Tracking

To collect order tracking, place our tangibleeAnalytics library on the checkout page:

<script async src="https://cdn.tangiblee.com/analytics/1.0/ta.min.js"></script>

Then you need to declare tangibleeAnalytics object:

window.tangibleeAnalytics = window.tangibleeAnalytics || function() {
    (window.tangibleeAnalytics.q = window.tangibleeAnalytics.q || []).push(arguments);
};

There are 2 ways to configure order tracking:

1. Call trackOrder on thank you page directly.

window.tangibleeAnalytics('trackOrder', {
    currency: 'USD', //order currency
    items: [
        {
          sku: 'MRC12EQ', //order line sku
          name: 'Maracuya', //order line name
          qty: 2, //order line quantity
          price: 5 //order line price per item
        }
    ]
});

2. Set auto-tracking - tangibleeAnalytics will automatically send the order by specified parsing function and URL where we should run.

window.tangibleeAnalytics('setAutoTracking', {
    trackOn: '/thankyoupage', //url string or regexp or fucntion
    parseOrder: parseOrder //function that returns order object
});

Where trackOn is thank you page URL and parseOrder which return order data in format from way 1.

Articles in this section

Please note: this is not your Integration Snippet, but an example for the sake of this guide. Your Tangiblee point of contact will share an Integration Snippet specifically for your website during the Onboarding Process.

Please note: this is not your Integration Snippet, but an example for the sake of this guide. Your Tangiblee point of contact will share an Integration Snippet specifically for your website during the Onboarding Process.

Related articles