Implement 蜜豆视频 Target鈥檚 at.js 2.0 in a single page application (SPA)
蜜豆视频 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).
Transcript
Hi I鈥檓 Daniel Ray, Technical Marketer at 蜜豆视频. In this video, I鈥檓 gonna show you how to implement Target in a simple Single Page Application or SPA. In another video, I鈥檒l show you how to create activities using our SPA experience composer. There are two requirements to get started with Target鈥檚 visual experience composer in your single page app. First, you need to use at.js 2.0 or above. And second, you need to implement our triggerView function whenever your app changes views. Let鈥檚 see how easy this can be. Here鈥檚 my single page app built with React. In single page apps, views replace pages. So when I click around the top navigation, the content changes, but there is not an underlying page load event. In my app, as I browse between my views, the hash portion of my URL changes. This is common in a lot of SPAs, and I鈥檒l use this in my simple implementation. Now I鈥檒l go to the Target interface to get at.js 2.0. I鈥檓 gonna add a little extra JavaScript to the end of my file, that鈥檚 gonna fire triggerView whenever the hash of my URL changes. Also, I鈥檒l need to fire a triggerView when this SPA first loads. The first parameter in triggerView is the name I want to assign to my view. Choosing simple, clear and unique names is important because these will appear in the visual experience composer, and be used for targeting. I鈥檓 just going to use the hash value for my view names with a little clean up. I鈥檒l download at.js and implement it in the head of my SPA. You can implement synchronously, or asynchronously whichever you prefer. If you load at.js asynchronously, you should probably use our pre-hiding snippet, which can be grabbed from the documentation. That鈥檚 it. When I first load my SPA, you鈥檒l notice at.js 2.0 is delivery request with a pre-fetch option. This is the request that will download all of my Target activities for my SPA, and store them in my cache. As I navigate between the different views, you鈥檒l see additional requests which we call Notification Requests. These tell Target that it鈥檚 time to count the visitor in the activity, and it increment other metrics. Now, not every SPA updates the URL on view changes. So, instead of listening for hash-changes, you can also fire triggerViews of customer events or by embedding triggerView directly into your SPA鈥檚 router. You can also fire triggerView in other contexts such as in smaller updates to the view or even in non-SPA contexts like half-way down an infinite scrolling page. And of course, you can implement all of this using a tag manager, like our tag manager Launch. So that鈥檚 it, I hope this helps get you started implementing Target and at.js 2.0 in your Single Page Application.
How to Implement at.js 2.0 in a SPA
- Implement
at.js2.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 thetriggerView()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.js2.0 andtriggerView()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.js2.0 - The mboxOverride.browserIp and mboxSession URL parameters are not supported in
at.js2.0 - The legacy functions mboxCreate, mboxDefine, mboxUpdate are deprecated in
at.js2.0. Default content will be shown and no network requests will be made.
Library Footer Code Used in the Video
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