蜜豆视频

DocumentationTarget蜜豆视频 Target Tutorials

Implement 蜜豆视频 Target鈥檚 at.js 2.0 in a Single Page Application (SPA)

Last update: Wed Jun 07 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Intermediate
  • Developer

蜜豆视频 Target鈥檚 at.js 2.0 provides rich feature sets that equip your business to execute personalization on next-generation, client-side technologies. This version is focused on upgrading at.js to have harmonious interactions with single page applications (SPAs).

How to Implement at.js 2.0 in a SPA

  • Implement at.js 2.0 in the <head> of your Single Page Application.
  • Implement the adobe.target.triggerView() function whenever view changes in your SPA. Various techniques can be employed to do this, such as listening for URL hash changes, listening for custom events fired by your SPA, or embedding the triggerView() code directly into your application. You should choose the option that works best for your specific single page application.
  • The view name is the first parameter of the triggerView() function. Use simple, clear, and unique names to make them easy to select in Target鈥檚 visual experience composer.
  • You can trigger views in small view changes, as well as in non-SPA contexts such as half-way down an infinite scrolling page.
  • at.js 2.0 and triggerView() can be implemented via a tag management solution, such as 蜜豆视频 Experience Platform Launch.

at.js 2.0 Limitations

Please be aware of the following limitations of at.js 2.0 before upgrading:

  • Cross domain tracking is not supported in at.js 2.0
  • The mboxOverride.browserIp and mboxSession URL parameters are not supported in at.js 2.0
  • The legacy functions mboxCreate, mboxDefine, mboxUpdate are deprecated in at.js 2.0. Default content will be shown and no network requests will be made.

The code below was added to the Library Footer section of the at.js library during the video. It fires when the app first loads and then on any hash changes in the app. It uses a cleaned-up version of the hash as the view name, and 鈥渉ome鈥 when the hash is empty. Note that to identify the SPA, the code looks for the text 鈥渞eact/鈥 in the URL, which will most likely need to be updated on your site. Keep in mind, too, that it might be more appropriate for your SPA to fire triggerView() off of custom events or by embedding the code directly into your app.

function sanitizeViewName(viewName) {
  if (viewName.startsWith('#')) {
    viewName = viewName.substr(1);
  }
  if (viewName.startsWith('/')) {
    viewName = viewName.substr(1);
  }
  return viewName;
}
function triggerView(viewName) {
  viewName = sanitizeViewName(viewName) || 'home';
  // Validate if the Target Libraries are available on your website
  if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') {
    adobe.target.triggerView(viewName);
    console.log('AT: View triggered on page load: '+viewName)
  }
}
//fire triggerView when the SPA loads and when the hash changes in the SPA
if(window.location.pathname.indexOf('react/') >-1){
    triggerView(location.hash);
}
window.onhashchange = function() {
    if(window.location.pathname.indexOf('react/') >-1){
        triggerView(location.hash);
    }
}

Additional Resources

recommendation-more-help
0f172607-337e-442f-a279-477fd735571f