Data Layer Implementation Guide

As mentioned before, the data layer builds the bridge between your finance website and analytics. The first implementation step is to integrate the data layer within the <head> section of each page on your website. This chapter contains a detailed description of the data layer to be implemented.

In the example provided here, we use Mapp's own Tag Management solution. The integration of Mapp Intelligence tracking tags is possible with other Tag Management tools, for example Google Tag Manager (GTM). Just create the relevant data layers as needed. In GTM, the data layer is a combination of events and variables.

Basic Data Layer

The following data layer is required to track each page.

Example

window._ti['pageName'] = 'bankoftomorrow.com/account';
window._ti['language'] = 'en';
window._ti['contentCategory'] = 'Account';
window._ti['contentSubcategory'] = 'Customer Service';
window._ti['emailOptIn'] = 'yes';
window._ti['customerId'] = '<encrypted email address of the user>';

JS

Data Layer Variable	Description
window._ti['pageName']	Contains the full URL of the page without the protocol (HTTP(s)) and parameters.
window._ti['language']	Contains the language version of the page, for example "de", "en", "it", "es"
window._ti['contentCategory']	Contains the content category. Possible values: Application Form Service Products Account Home Content Portal
window._ti['contentSubcategory']	Contains the content subcategory. Possible values: Corporate Career Customer Service Tools Product Overview Product Detail Internal Search Landing Page Guide Blog Info Knowledge
window._ti['emailOptIn']	Indicates whether a user has decided to receive e-mail. It is user-related status information that can be tracked, for example when a user logs on or via a cookie. Possible values: 1 = yes 2 = no 3 = unknown (default)
window._ti['customerId']	The encrypted e-mail of the user. Requires SHA256 hash encoded.

Data Layer for Product & Application Process Pages

For data layers on product pages, note the following points:

For the product and application process, you must extend the data layer with additional information about the financial product and application details.
For the detail pages of your financial products, it is necessary to track product-specific information such as product IDs.
For the application process, you need to extend the data layer with additional information about each step during the process: from the first step of the application process until the confirmation page.

Data Layer for Product Detail Pages

You probably have numerous interesting financial products that you offer to customers and prospects. To find out more about how your website visitors interact with the product detail pages and to leverage the data in your CI Dashboard, you must implement additional data layers. The tracking of product-specific information such as product ID, name, and category is relevant for the product detail pages. Therefore, in addition to the primary data layer for all pages, you must add the following data layer on all product detail pages of your finance website.

window._ti['productId'] = 'car loan students';
window._ti['productStatus'] = 'view';
window._ti['productName'] = 'car loan students';
window._ti['productCategory'] = 'retail banking';
window._ti['productSubcategory'] = 'loans';

JS

Data Layer Variable	Description
window._ti['productId']	Contains the title or descriptive name of the product, for example "car loan" or "retirement fund".
window._ti['productStatus']	Indicates whether a product is viewed, added, or purchased. The status must be set to view if viewed but the application process has not started yet.
window._ti['productName']	Contains the product title or another descriptive name of the product.
window._ti['productCategory']	Contains the product category, for example "retail banking," "corporate banking", "investment banking", etc.
window._ti['productSubcategory']	Contains the subcategory of the product, for example "loans" "commercial mortgages", "portfolio management" etc.

Data Layer for Application Process Pages

Now your customer or prospect has viewed your product detail page on car loans. The offer is so compelling that the person clicks on the button Apply now. By following your call-to-action (CTA), the user starts the application process on your website. To track the entire application process it is necessary to extend the basic data layer with additional information. Each step has to be considered as a separate page – from the first step in your application form until the confirmation page.

You must add the following suffix to the URL of each step:

First Step: "step1"
Second Step: "step2"
Third Step: "step3"
...
Final Step / Confirmation: "stepfinish"

If you have multiple process branches, it is necessary to follow the order of each process step in the process until they reconnect, as shown in the next figure.

Let's assume you have an application process of 5 steps for your product "car loan for students". Then your application form has 5 different pages. Each page represents one step. In the first step you summarize the offer. In the second and third step the applicant fills in personal and financial data. On the fourth page you provide an overview with all info that the person has entered. After a thorough check the applicant sends the form. Everything is correct and you display a confirmation page to inform the person about his successful application in the last step. To cover the entire application process you need to track the different steps. A simple process in 5 steps might look like this:

First Step in Application Forms

As described earlier, the customer starts the application by clicking on the CTA "Apply now" on your product detail page. This action directs the person to the first step in your application process. On the first page in the application form you might give an overview or the details of the offer.

Like all pages within the form, the page name needs to finish with a suffix. Given the fact that this is the first step, the URL ends with "-step1". Apart from that, the status needs to be set to "add" – only for the first step to indicate that the applicant started the process. The step name will be sent as an additional parameter.

Example

window._ti['pageName'] = 'bankoftomorrow.com/car-loan/application/offerDetails-step1';
window._ti['productId'] = 'car loan students';
window._ti['productStatus'] = 'add';
window._ti['productName'] = 'car loan students';
window._ti['stepName'] = 'offer';

JS

Data Layer Variable	Description
window._ti['pageName']	The page name ends with the suffix "-step1".
window._ti['productId']	In general, same value as productName.
window._ti['productName']	The product title or some other descriptive name of the product.
window._ti['productStatus']	The status needs to be set to add.
window._ti['stepName']	The step name needs to be sent as additional parameter.

Second to Second Last Step in Application Forms

On the second page of the process the prospect enters his personal details, e. g. name, birthday, contact details. The 3rd step asks the applicant to provide financial data. In a fourth step you might give the person the opportunity to check all details on an overview page. For these steps page, product and step names are required.

Example

window._ti['pageName'] = 'bankoftomorrow.com/car-loan/application/personalData-step2';
window._ti['productName'] = 'car loan students';
window._ti['stepName'] = 'personalData';

JS

You might also want to gather info like birthday or family status. Just add the additional data layers to one of the steps. This info can be processed as soon as it is available. For your implementation it might be best to pass it at an early stage of the application process. If needed, it can be send with the confirmation page, too:

Example

window._ti['pageName'] = 'bankoftomorrow.com/car-loan/application/personalData-step2';
window._ti['productName'] = 'car loan students';
window._ti['stepName'] = 'personalData';
window._ti['birthday'] = '19810503';
window._ti['gender'] = '1';
window._ti['income_group'] = 'Group1';
window._ti['family_status'] = 'Single';

JS

Data Layer Variable	Description
window._ti['pageName']	For application processes, the step number needs to be included as a suffix in every step request.
window._ti['productName']	The product title or other descriptive name of the product.
window._ti['stepName']	The step name needs to be sent as additional parameter.
window._ti['birthday']	Is filled in when the user specifies his birthday. The format is YYYYMMDD, for example: 19810503. In case of data protection concerns, the customer can only indicate the year via ""YYYY0101"", whereby month and year serve as placeholders, for example: 19900101.
window._ti['gender']	Is filled in when the user specifies their gender. Possible values: 1 = male 2 = female
window._ti['income_group']	Contains one of four possible income groups. The thresholds should be identical for all application forms.
window._ti['family_status']	Contains one of these values: Married, Single, Other

Last Step aka Confirmation Page in Application Forms

In addition to the basic data layer for all pages, apply the following data layer to all confirmation pages that are displayed after a successful application.

Example

window._ti['pageName'] = 'bankoftomorrow.com/car-loan/application/success-stepfinish';
window._ti['productId'] = 'car loan students';
window._ti['shoppingCartStatus'] = 'conf';
window._ti['totalOrderValue'] = '0';
window._ti['productName'] = 'car loan students';
window._ti['stepName'] = 'confirmation';

JS

Data Layer Variable	Description
window._ti['pageName']	The page name ends with the suffix "-stepfinish".
window._ti['productId']	Normally contains the same value as productName.
window._ti['shoppingCartStatus']	Indicates that the application has been sent. Must be set to conf.
window._ti['totalOrderValue']	The order value is needed to track order goals. Needs to be set to 0.
window._ti['productName']	Contains the title or other descriptive name of the product.
window._ti['stepName']	Contains the step name which is sent as an additional parameter.

If you have multiple values for a variable, separate the values with a semicolon.

Data Layer for Internal Searches

The internal search is an essential navigation element widely used on finance web pages. It is also an excellent web analytics tool for obtaining information on website visitors to optimize, for example, the conversion rate. With the help of internal search analysis, you can better understand which keywords were used by visitors during a session, on which pages this search takes place and, which target pages visitors access later. There are two methods for tracking the internal search:

Using URL Parameters

If you use the URL parameter method, you must inform your Mapp Intelligence Account Manager. The Account Manager can then make the necessary changes in Mapp Q3 ( configuration of query parameters).

With a data layer

Example

window._ti['internalSearchPhrase'] = 'WKN';
window._ti['internalSearchResultsQuantity'] = '10';

JS

Data Layer Variable	Description
window._ti['internalSearchPhrase']	Contains the search phrase as a string.
window._ti['internalSearchResultsQuantity']	Contains the quantity of the search results as a number.

Implementing Tag Integration Loader

The basis of the tracking implementation is the integration of the Tag Integration loader on your website. To do this, add the following configuration for Tag Integration below the data layer of your website:

Example

window._tiConfig = window._tiConfig || {
    tiDomain: 'responder.wt-safetag.com',
    tiId: '111111111111111',
    option: {}
};
  
/** start TagIntegration loader  */
(function(a,d,c,f){a.wts=a.wts||[];var g=function(b){var a="";b.customDomain&&b.customPath?a=b.customDomain+"/"+b.customPath:b.tiDomain&&b.tiId&&(a=b.tiDomain+"/resp/api/get/"+b.tiId+"?url="+encodeURIComponent("https://"+d.location.host+"/")+"&v=5");if(b.option)for(var c in b.option)a+="&"+c+"="+encodeURIComponent(b.option[c]);return a};if(-1===d.cookie.indexOf("wt_r=1")){var e=d.getElementsByTagName(c)[0];c=d.createElement(c);c.async=!0;c.onload=function(){if("undefined"!==typeof a.wt_r&&!isNaN(a.wt_r)){var b=
new Date,c=b.getTime()+1E3*parseInt(a.wt_r);b.setTime(c);d.cookie="wt_r=1;path=/;expires="+b.toUTCString()}};c.onerror=function(){"undefined"!==typeof a.wt_mcp_hide&&"function"===typeof a.wt_mcp_hide.show&&(a.wt_mcp_hide.show(),a.wt_mcp_hide.show=function(){})};c.src="//"+g(f);e.parentNode.insertBefore(c,e)}})(window,document,"script",_tiConfig);
  
/** end TagIntegration loader */

JS

Parameter	Description
tiDomain	You can obtain this information from your Mapp Intelligence consultant. If you have further questions, please contact them directly.
tiId

Basic Data Layer

Example

Data Layer for Product & Application Process Pages

Data Layer for Product Detail Pages

Data Layer for Application Process Pages

First Step in Application Forms

Second to Second Last Step in Application Forms

Last Step aka Confirmation Page in Application Forms

Data Layer for Internal Searches

Using URL Parameters

With a data layer

Example

Implementing Tag Integration Loader

Example

Cookie Notice