Econda - Tracking
  • Updated on 05 Mar 2020
  • 5 minutes to read
  • Print
  • Share
  • Dark
    Light

Econda - Tracking

  • Print
  • Share
  • Dark
    Light

Now that we have integrated Econda to the website we can start adding the tracking code.

Prerequisites

To add tracking, you should also be familiar with Twig.

To enable Econda tracking for your application, you need to add econda_tracker.twig to the proper page template, for example:

{% include
"@econda/partials/econda_tracker.twig" with {
	'content': '/catalog/' ~ ((category is not null) ? category.name ~ '/' : '') ~ product.name,
	'product': product,
	'category': category
} %}

To enable Econda tracking for your application, you need to download a personalized JavaScript library from the econda Analytics Configuration menu (you can find detailed instructions on this on https://support.econda.de/display/MONDE/Tracking-Bibliothek+herunterladen).

These instructions assume you are using Antelope for your Yves assets management. If your project uses other frontend automation you can still use the instructions as guidelines.

Before getting started we recomend that you read the following topics: asset management
and Twig

Installing Assets

After successfully downloading the emos.js you need to register it in Yves. One way is to create an econda folder in assets/Yves/<themeName> folder and to copy it to SDK folder (look at picture below)

Now you add an entry point for loading econda specific JS by adding econda.js file in Econda folder.

Now you need to add a require line:

require('./sdk/emos2'); //make double check the path to emos2.js

Now we need to add our new econda module to entry.js

by adding a line require('js/econda/econda');

Integration

Tracking is highly customizable and it depends on your setup. Please refer to econda official documentation.

Here is a sample econda-tracking.js you can use as a help to integrate tracking to your website:

Sample econda-tracking.js

'use strict';

var $ = require('jquery');

module.exports = {
   init: function () {
       window.emosTrackVersion = 2; //version of tracking lib that you are using
       var hashCode = function(str){
           var hash = 0, char;
           if (str.length == 0) return hash;
           for (i = 0; i < str.length; i++) {
               char = str.charCodeAt(i);
               hash = ((hash<<5)-hash)+char;
               hash = hash & hash; // Convert to 32bit integer
           }
           if (hash < 0) {hash = -hash;}
           return "" + hash;
       };

       var emospro = {
           siteid: window.econda_siteid,
           content: window.econda_tracking_content,
           langid: $("html").prop("lang"),
           pageId: hashCode(window.location.href)
       };

       if (window.econda_search_query_string) {
           emospro.search = [window.econda_search_query_string, window.econda_search_number_results];
       }

       if (window.econda_register_result) {
           emospro.register = [window.econda_register_result, 0];
       } else if (window.econda_register_result == false) {
           emospro.register = [0, 1];
       }

       if (window.econda_login_result) {
           emospro.login = [window.econda_login_result, 0];
       } else if (window.econda_login_result == false) {
           emospro.login = [0, 1];
       }

       if (window.econda_newsletter_subscription) {
           emospro.Target =  ['newsletter', 'Default newsletter subscription', 1, 'd'];
       }

       if (window.econda_product_name) {
           emospro.ec_Event = [
               {
                   type: 'view' ,
                   pid: window.econda_product_sku,
                   sku: window.econda_product_sku,
                   name: window.econda_product_name,
                   price: window.econda_product_price,
                   group: window.econda_category_name,
                   count: 1
               }
           ];
       }

       if (window.econda_billing_order_value) {
           emospro.billing = [
               window.econda_billing_invoice_number,
               econda_billing_customer_id,
               econda_billing_location,
               econda_billing_order_value
           ];
       }

       if (window.econda_order_process) {
           emospro.orderProcess = window.econda_order_process;
       }

       if (window.econda_bought_product_name & window.econda_bought_product_name.length > 0) {
           emospro.ec_Event = [];
           for (var i = 0, len = econda_bought_product_name.length; i < len; i++) {
               emospro.ec_Event.push({
                   type: 'buy' ,
                   pid: window.econda_bought_product_sku[i],
                   sku: window.econda_bought_product_sku[i],
                   name: window.econda_bought_product_name[i],
                   price: window.econda_bought_product_price[i],
                   count: window.econda_bought_product_count[i]
               });
           }
       }

       window.emosPropertiesEvent(emospro);
       //console.log('econda tracking sent:');
       //console.log(emospro);
   }
};

Now you need to register your tracking module in econda.js by adding

var econdaTracking = require('./econda-tracking');
econdaTracking.init();

to econda.js.

Adding a Tracking Code to Twig

The econda module comes with a partial twig template econda_tracker.twig that you can use as an example in your project.

Twig Template

<input type="hidden" name="econda_tracking_content" value="{{ content }}">
{% if query is defined %}
   <input type="hidden" name="econda_search_query_string" value="{{ query }}">
{% endif %}

{% if number is defined %}
   <input type="hidden" name="econda_search_number_results" value="{{ number }}">
{% endif %}
{% if product is defined %}
   <input type="hidden" name="econda_product_name" value="{{ product.name }}">
   <input type="hidden" name="econda_product_sku" value="{{ product.sku }}">
   <input type="hidden" name="econda_product_price" value="{{ product.price / 100 }}">
{% endif %}
{% if category is defined %}
   <input type="hidden" name="econda_category_name" value="{{ category.name }}">
{% endif %}

{% if invoiceNumber is defined %}
   <input type="hidden" name="econda_billing_invoice_number" value="{{ invoiceNumber }}">
{% endif %}

{% if location is defined %}
   <input type="hidden" name="econda_billing_location" value="{{ location }}">
{% endif %}

{% if customerId is defined %}
   <input type="hidden" name="econda_billing_customer_id" value="{{ customerId }}">
{% endif %}

{% if orderValue is defined %}
   <input type="hidden" name="econda_billing_order_value" value="{{ orderValue }}">
{% endif %}

{% if orderProcess is defined %}
   <input type="hidden" name="econda_order_process" value="{{ orderProcess }}">
{% endif %}

{%  if items is defined %}
   {% for item in items %}
       <input type="hidden" name="econda_bought_product_name[]" value="{{ item.name }}">
       {#<input type="hidden" name="econda_bought_product_sku[]" value="{{ item.abstractSku }}">#}
       <input type="hidden" name="econda_bought_product_sku[]" value="{{ item.sku }}">
       <input type="hidden" name="econda_bought_product_price[]" value="{{ item.unitGrossPrice / 100 }}">
       <input type="hidden" name="econda_bought_product_count[]" value="{{ item.quantity }}">
   {% endfor %}
{%  endif %}

{% for econda_register_result in app.session.flashbag.get('flash.vars.register') %}
   <input type="hidden" name="econda_user_register_result" value="{{ econda_register_result }}">
{% endfor %}

{% for econda_login_result in app.session.flashbag.get('flash.vars.login') %}
   <input type="hidden" name="econda_login_result" value="{{ econda_login_result }}">
{% endfor %}

{% for econda_newsletter_subscription_result in app.session.flashbag.get('flash.vars.newsletter.subscription') %}
   <input type="hidden" name="econda_newsletter_subscription_result" value="{{ econda_newsletter_subscription_result }}">
{% endfor %}

List of the accepted template variables:

Name Description Notes
content Path of the current page, as displayed in econda Monitor. Use slashes (“/”) to separate path components for drill-down analysis. Translated into CONTENTLABEL parameter
query Search query (could be passed to the search results page template) Translated into QUERY parameter
number Number of results returned by the search query (can be passed to the search results page template) Translated into NUMBEROFHITS parameter
product Associative array representing product data (can be passed to the product page template). Accepted keys: abstract_name, abstractSku, price Product Information
category Associative array representing category (can be passed to the product page template). Accepted keys: name Product Information
invoiceNumber Order number (can be passed to the checkout success template) Translated into INVOICENUMBER parameter
location Customer address (can be passed to the checkout success template) Translated into LOCATION parameter
customerId Customer ID (can be passed to the checkout success template) Translated into CUSTOMERID parameter
orderValue Total order value (can be passed to the checkout success template) Translated into ORDERVALUE parameter
orderProcess Checkout step name Translated into STEPNAME parameter
items Associative array representing cart items (can be passed to the checkout success template) Link
flash.vars Associative array representing intermittent data. Accepted keys: register, login, newsletter.subscription
Tip
Remember to build your frontend by running antelope build yves from your project root folder

In your project you will probably want to customize the tracking to fit the business requirements either by writing your own partial template or by overriding and extending the existing one, see Best Practices - Twig Templates.

Checking Your Setup

If your setup is correct you should see outgoing request going to Econda in browser developer tools when you navigate to a page that has tracing code included.

Was this article helpful?