Universal SPA

Universal SPA extension for at.js library provides a framework independent SPA implementation to trigger Target calls on both initial page loads and following view changes. It uses native Web API MutationObserver to react to DOM changes and fire Target call for every new URL value.

Universal SPA consists of two at.js extensions: required one is UniversalSPA (receives rules to fire Target calls) and optional one UniversalSPA Router (contains logic with rules for when to pass calls to UniversalSPA). You may wish to use your own logic instead of UniversalSPA Router to pass rules to UniversalSPA, for example, after your DTM layer update. This extension works for any SPA or regular website.

Conveniently, this extension implementation can be added to the application using DTM.

Prerequisites:

1. AT.js library

Quick Integration Instructions:

1. Include at.js;
2. Include UniversalSPA bundle code right after at.js;

Advanced Integration Instructions:

1. Include at.js;
2. Include UniversalSPA right after at.js;
3. Include UniversalSPA Router right after UniversalSPA, OR, instead of this extension helper, fire Target call at any moment (say, after your data layer update) using this line: var evt=new CustomEvent('atx-target-call-ready',{detail:{mbox:'target-global-mbox'}});document.dispatchEvent(evt);
4. Optionally, add polyfill for MutationObserver before UniversalSPA Router code to support IE 9-10;

Configuration:

Simple configuration to fire global Target call for every URL value of SPA:

adobe.target.ext.universal.router({rules:[{mbox:'target-global-mbox'}]});

Advanced configuration:

adobe.target.ext.universalspa.router({
  rules:[
    {
        mbox: 'target-global-mbox',
        params: {foo: 'bar'}
        // When SPA URL does not chnage to trigger Target call, use domEventNotifications;
        // domEventNotifications responds to listed events to trigger calls for specified selector elements
        ,domEventNotifications: {
          //list of events to trigger calls for selector element and allowed/disallowed paths
          click: [{ allow: ['#/step'], selector: '#submit-step2' }, { allow: ['#/step'], selector: '#submit-step3' 
        }]
        }
    }
    // Regional Mbox example with all options
    ,{
        mbox: 'regional-mbox-1', //required mbox name
        selector: '.section > .head', //required element selector
        allow: ['#/'], //fires on #/ paths
        disallow: ['#/services','#/pricing','#/about','#/contact'] //will not fire
    }
  ]
  // This routine is perfect for resetting Visitor Id state to renew SDID values
  ,beforeTargetRequest: function(rule){
      console && console.log('ATX-router: beforeTargetRequest');
      if(rule.mbox === 'target-global-mbox' && typeof Visitor==='function'){
        var visitor = Visitor.getInstance("Marketing_Cloud_organization_ID@AdobeOrg");
        if(typeof visitor.resetState==='function'){
          visitor.resetState();
          console&&console.log('ATX-router: visitor.resetState');
        }
      }
    }
  // This routine is perfect for triggering Analytics call which must follow Target call for A4T
  ,afterTargetRequest: function(){
      console&&console.log('ATX-router afterTargetRequest');
    }
});

Demo

Universal SPA Example