How do I view Tangiblee performance metrics within my own GA?

Please follow the steps outlined in this article in order to view Tangiblee events within your own Google Analytics (GA).  

Collecting Tangiblee Performance Metrics when you have Semi-Managed or Self-Service Integration

Overview 

The purpose of this document is to specify how to set up analytics, in order to track Tangiblee performance on your website.

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

Performance metrics consist of 2 parts:

1. Metrics from the Product Details Page (PDP)
2. Order Tracking

Performance metrics can be configured by the Tangiblee team or by your team, depending 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 the 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>

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 an 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 is 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 the 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 returns order data in format from way 1.