Understanding Jahia pages data layer (digitalData object)

October 24, 2022

Overview

At the core of jExperience interaction with the browser, the digitalData object is built by jExperience and inserted into the page (window.digitalData) before it being rendered by the visitor’s browser.

Wem.js, jExperience Javascript tracker uses the digitalData object as a data source for many of its functions. This object is added automatically by the jExperience module and is necessary for its tracker. It contains data related to the current page, the current site and custom configuration for required properties.

A W3C Community group

The digitalData object was defined by the Customer Experience Digital Community Group under W3C. The group published a final report available at this address: https://www.w3.org/2013/12/ceddl-201312.pdf

This report was used as a foundation for the team developing jExperience to generate the window.digitalData object.
 

Example

{
    "scope": "digitall",
    "site": {
        "siteInfo": {
            "siteID": "8b2bcae6-0324-4e63-b28e-591e0372a455"
        }
    },
    "page": {
        "pageInfo": {
            "pageID": "6142eec9-8817-4c02-8935-46abda6d1918",
            "nodeType": "jnt:page",
            "pageName": "Home",
            "pagePath": "/sites/digitall/home",
            "templateName": "home",
            "destinationURL": "http://localhost:8080/sites/digitall/home.html",
            "destinationSearch": "",
            "referringURL": null,
            "language": "en",
            "categories": [],
            "tags": [],
            "isContentTemplate": false,
            "sameDomainReferrer": false
        },
        "attributes": {},
        "consentTypes": []
    },
    "events": [
        {
            "eventType": "view",
            "scope": "digitall",
            "target": {
                "scope": "digitall",
                "itemId": "6142eec9-8817-4c02-8935-46abda6d1918",
                "itemType": "page",
                "properties": {
                    "pageInfo": {
                        "pageID": "6142eec9-8817-4c02-8935-46abda6d1918",
                        "nodeType": "jnt:page",
                        "pageName": "Home",
                        "pagePath": "/sites/digitall/home",
                        "templateName": "home",
                        "destinationURL": "http://localhost:8080/sites/digitall/home.html",
                        "destinationSearch": "",
                        "referringURL": null,
                        "language": "en",
                        "categories": [],
                        "tags": [],
                        "isContentTemplate": false,
                        "sameDomainReferrer": false
                    },
                    "attributes": {},
                    "consentTypes": []
                }
            },
            "source": {
                "scope": "digitall",
                "itemId": "8b2bcae6-0324-4e63-b28e-591e0372a455",
                "itemType": "site"
            }
        }
    ],
    "contextServerPublicUrl": "http://localhost:8181",
    "sourceLocalIdentifierMap": {},
    "wemInitConfig": {
        "contextServerUrl": "http://localhost:8181",
        "proxyServletUrl": "/modules/jexperience/proxy/digitall",
        "isPreview": false,
        "timeoutInMilliseconds": "1500",
        "dxUsername": "guest",
        "contextServerCookieName": "context-profile-id",
        "activateWem": true,
        "enableWemActionUrl": "/en/sites/digitall.enableWem.do",
        "requiredProfileProperties": [
            "j:nodename"
        ],
        "requiredSessionProperties": [],
        "requireSegments": false,
        "requireScores": false
    },
    "loadCallbacks": [
        null
    ]
}
{
    "scope": "www",
    "site": {
        "siteInfo": {
            "siteID": "dc118939-4e35-495d-a6f2-82100a4b1fe4"
        }
    },
    "page": {
        "pageInfo": {
            "pageID": "92b9ffc6-f2bf-4901-a3ae-201deaa0a637",
            "nodeType": "jnt:page",
            "pageName": "Jahia | Plateforme d'expérience digitale | DXP",
            "pagePath": "/sites/www/home",
            "templateName": "home",
            "destinationURL": "https://www.jahia.com/home/fr",
            "referringURL": null,
            "language": "fr",
            "categories": [],
            "tags": [],
            "isContentTemplate": false,
            "sameDomainReferrer": false
        },
        "attributes": {},
        "consentTypes": []
    },
    "wemInitConfig": {
        "requiredProfileProperties": ["j:nodename"],
        "requiredSessionProperties": [],
        "requireSegments": false,
        "requireScores": false
    }
}

Properties

window.digitalData.scope

Current scope, this value is used across all of the objects generated by wem.js

window.digitalData.site

The site object contains information about the current Jahia site; it is typically used to build the source of the page view event.

window.digitalData.page

The page object contains information about the current Jahia page, it is typically used to build the page view event, but it’s also used as a source for all other events coming from the page, like click, form submission, etc …

window.digitalData.wemInitConfig

The wemInitConfig object contains various configurations reused by the tracker to load the current user profile data and add it to the data layer. 

Provide custom digitalData elements

As explained previously, the digitalData object is created by jExperience and automatically injected into the page to be used by wem.js.

Content of the digitalData object can be overridden (or extended) using the window.digitalDataOverrides array, which receives part of the object to be updated, for example:

<script type="application/javascript">
   window.digitalDataOverrides.push({
       page: {
           pageInfo: {
               pagePath: "/pathOverrided",
               categories: ["categoryOverride"],
               newProp: "newPropOverride",
               newArray: ["newPropArrayOverride"],
               newObject:  {
                   prop1: 'newObjectOverride1',
                   prop2: 'newObjectOverride2'
               }
           }
       },
       wemInitConfig: {
           requiredProfileProperties: ["firstName"],
           requiredSessionProperties: ["*"],
           requireSegments: true
       }
   });
</script>

New properties will be added and existing properties will be overridden, unless it’s array, in that particular case the arrays will be merged.

Inside wem.js, the following function is in charge of updating the digitalData object:

if (window.digitalDataOverrides && window.digitalDataOverrides.length > 0) {
    for (const digitalDataOverride of window.digitalDataOverrides) {
      window.digitalData = wem._deepMergeObjects(digitalDataOverride, window.digitalData);
    }
}

For example, you can add a category to the page view event using the following code snippet at the top of your page:

<script type="application/javascript">
   window.digitalDataOverrides.push({
       page: {
           pageInfo: {
               categories: ["newCategory"]
           }
       }
   });
</script>