Tag Integration Configuring and Mapping

Configuration

To configure the plugin, follow these simple steps:

1. In the admin panel, go to Stores > Configuration

2. In the plugin list, select Mapp Cloud >Mapp Intelligence > Tag Integration

3. Enable the plugin

4. You need to enter your tiId and the responder domain, all the other values are optional

After changing the configuration, you will need to flush the cache. This can be done via path_to_magento_app/bin/magento cache:flush. In the Admin panel, you can go to System > Cache Management and flush the cache from there.

Whitelisting

Mapp allows you to load the responder script (which loads the Tag Integration container) and the tracking domain (which loads the tracking pixel) from your own domain instead of the ones provided by Mapp.

Since Adobe Commerce now has its own Content Security Policies (CSP) service enabled by default, you need to add your domains to the whitelist. It is possible to do this by editing a file of the plugin.

You can find the file on your server under app/code/Webtrekk/TagIntegration/etc/csp_whitelist.xml

Future plugin updates might overwrite those changes and you'd need to apply them again.

Under the img-src policy, you can add /replace your custom track domain, and under the script-src policy, you can add/replace your custom responder domain.

More information about Adobe Commerce CSP can be found here.

Mapping

Here, you'll learn how to map the Magento store data exposed under window_ti via Mapp Tag Integration.

It is a simple two-part process:

1.  Create a parameter that reads the data from the _ti object.
   
   Example: To track the pageName, create a parameter in TI like this:
    

2. Map the data to the Mapp Intelligence plugin in your container within the Mapp Intelligence plugin
    

Attribute overview of _ti object

Additional data

Depending on your configuration, the data layer contains a lot more data. To see it, open your Magento store in your browser and press F12 to open the developer tools.

There, switch to the JavaScript console, type "_ti" and press enter.

Add-to-cart event

A special case is the add-to-cart event: since the data layer holds the add-to-cart data for only a couple of milliseconds, you cannot read it as described above.

In order to see the add-to-cart data, you have to set the cookie 'mapp_debug'in your browser - having set that, the data of the add-to-cart event will be logged to the JS console.

Here is a step-by-step guide to see an add-to-cart event:

1. Open your Magento store

2. Open the dev tools by pressing F12

3. Set the JS cookie 'mapp_debug' - you can use the code snippet below to set this cookie for 1000 days, just copy&paste into the JS console and press enter

4. With the dev tools still open and the JS console tab selected, add an article to the basket - the data will be logged to the console

(function() {
	var d = new Date();
	d.setTime(d.getTime() + (1000*24*60*60*1000));
	var expires = "expires="+ d.toUTCString();
	document.cookie ="mapp_debug=1;" + expires + ";path=/";
})();

Certain product data, like the attributes of a configurable product, is only available during the add-to-cart event and during the order, but not on the normal product view (since the options are not yet selected).

For instance, _ti.productAttributesSize holds the data for a product's size. For clothes, that value would be 's', 'm', 'l', 'xl', etc. The attribute for color can be found under _ti.productAttributesColor.

Depending on your configuration, you will find all the configurable data in _ti. However, you won't find it during view, just during add-to-basket and order.