Adding the Econda tracking code

Last updated: June 16, 2021

Edit on GitHub

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.

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.

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?

Tell us what could be better

Name (Optional)

Email (Optional) Invalid email format.

Type your thoughts here

We appreciate the time you took to share the feedback
and will consider it as soon as possible.