Unit Testing Your Tealium Implementation with Mocha and Chai

[ty_gavin]

Implementing the Tealium Universal Tag (utag.js) on your website isn't rocket science, but it does require a fair amount of pre-planning and requirements gathering. We have a whole team of implementation specialists dedicated to guiding customers through this initial process. It's a non-trivial amount of work to get a robust implementation deployed to your production site. Which is why it's worth thinking about your long-term strategy for maintaining that implementation.

First, we can all admit that imperfections are bound to arise in your Tealium implementation. As your site goes through weekly or monthly releases, it's inevitable that one of them will interrupt your data layer or tracking. Of course, the flexibility of the iQ Tag Management platform makes it easy to apply one-off fixes. For example, you can use extensions to add missing variables to the data layer, apply fixes to errant values, or set up event tracking -- all feasible tasks within a matter of minutes. But these patches add up over time and will clutter your iQ workspace, making difficult to maintain over the long term. So, you need better strategies to ensure that your implementation remains in tact after each release. So let's talk about unit testing!

Entire software companies exist for this purpose (see ObservePoint). At the same time, adopting a test-driven development (TDD) approach to your Tealium implementation is now easier than ever with the available frameworks such as Mocha and Chai. The following is an example of how you could add a Mocha-based testing suite entirely inside your Tealium iQ workspace.

Mocha provides unit testing in the browser using JavaScript. You set the test conditions and Mocha asserts them as true or false. The end-result is usually some kind of a "green check" that indicates everything is okay. While Mocha would generally be used to validate an entire web application, it can easily be used to verify that your Tealium installation is working as expected.

How It Works

This solution uses the following components:

• A Tealium Custom Container tag to load the Mocha and Chai JavaScript libraries.
• A JavaScript Code extension to define and run the unit tests.
• A load rule based on your testing condition.
• Mocha and Chai libraries.

Copy the entire contents of the JavaScript libraries from these links:

• Chai Library: https://unpkg.com/chai@4.2.0/chai.js
• Mocha Library: https://unpkg.com/mocha@6.2.1/mocha.js

Also copy this snippet that loads the Mocha CSS:

document.body.innerHTML += '<div id="mocha"></div>';
// Inject CSS
var mochaCSS=document.createElement("link");
mochaCSS.setAttribute("rel", "stylesheet");
mochaCSS.setAttribute("type", "text/css");
mochaCSS.setAttribute("href", "https://unpkg.com/mocha@6.2.1/mocha.css");
document.head.appendChild(mochaCSS);

Then add a Tealium Custom Container tag and paste the contents of each library and the CSS into the tag template between lines 21 and 22 (yes, it's a lot of code, but you won't need to edit this file again):

/* Start Tag Library Code */
    // Paste Mocha and Chai code here
/* End Tag Library Code */

Next, create a load rule for this tag that triggers the test. In this example, we will use a query string parameter called utest. When utest is set to "mocha" the Mocha/Chai tag loads.

Finally, add a JavaScript Code extension for the actual unit test. In this example, we are testing the data layer on the product detail pages, so we added a condition on the extension to test when tealium_event='product_view'. Be sure to scope this extension to the Mocha/Chai tag so that it will only run when that tag loads.

Using the condition on the extension allows you to create separate unit tests for each page type or event that you want to test.

The product page extension tests that the product variables are arrays with a length of 1. It also tests the expected value of the page_type variable.

Paste this code into the extension:

var assert = chai.assert;
mocha.setup('bdd');

// utag_data
describe('utag_data', function() {
    var prod_vars = [
        "product_id"
        ,"product_list_price"
        ,"product_name"
        ,"product_sku"
    ];
    prod_vars.forEach(function(p) {
        describe(p, function() {
            it('is an array when defined', function() {
                assert.equal(utag.ut.typeOf(b[p]), "array");
                //chai.expect(utag.ut.typeOf(b.[p])).to.equal("array");
            });
            it('has length 1', function() {
                assert.equal(b[p].length, 1);
            });
        });
    });
    // page_type
    describe('page_type', function() {
        it('equals "product"', function() {
            assert.equal(b.page_type, "product");
        });
    });
});

// Run the tests
mocha.run();

That's it! Now publish your changes and test it out.

Demo Site

You can see a working demo of this solution, but you'll need the Environment Switcher to switch to the demo account.

1. Go to the demo product page: http://www.tealiumecommerce.com/linen-blazer-599.html
2. Use the Environment Switcher to load the following file: tealium-ia/main/dev
   
3. Trigger the test using the query string parameter "utest=mocha":
   http://www.tealiumecommerce.com/linen-blazer-599.html?utest=mocha

Scroll to the bottom of the page to find the Mocha test results:

Hopefully this gives you some great ideas for how you can test your own implementation.