Expand my Community achievements bar.

Ask our product team on how to best grow your experimentation and personalization strategies with Target during our AMA on May 6th!

Mark Solution

This conversation has been locked due to inactivity. Please create a new post.

SOLVED

First time installing target v2.x + triggerview() function for SPA

Avatar

Level 4

I have successfully implemented step 1 below. I am trying to work out what is required for step 2.

Can-I-implement-Target-for-Single-Page-Applications-SPAs-.jpg

 

I tried implementing this on a page, in the hope that it would then make this view (homeView) visible to me in the Target VEC... but it didn't. 

Am I overlooking something really simple here? Do I need to define the triggerView function somewhere? Thanks in advance.

<script>
window.addEventListener("load", (event) => {
adobe.target.triggerView("homeView");
});
</script>

 

With this, I am expecting to see the view appear in the modifications tab within Adobe Target using the VEC... But I dont..

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 4

We were able to find a solution internally with our developers. The solution we came up with involves listening for 'any' clicks, and if the clicked element contains an attribute called "data-adobe-view", then get its value (i.e. the name of the view) and then fire a triggerView call using that value as a parameter.

 

This is a simple and very scalable solution that satisfies our needs.

 

Here it is:

document.body.addEventListener('click', function(event) { if (event.target.matches('[data-adobe-view]')) { if (typeof adobe !== 'undefined' && !!adobe.target && typeof adobe.target.triggerView === 'function') { adobe.target.triggerView(event.target.dataset.adobeView) } } });

 

This overcame some issues we found with the onclick approach, whereby our use of Rocket Loader (Cloudflare) was interfering as per: https://stackoverflow.com/questions/65449689/cloudflare-seems-to-be-blocking-google-analytics-onclic...

View solution in original post

1 Reply

Avatar

Correct answer by
Level 4

We were able to find a solution internally with our developers. The solution we came up with involves listening for 'any' clicks, and if the clicked element contains an attribute called "data-adobe-view", then get its value (i.e. the name of the view) and then fire a triggerView call using that value as a parameter.

 

This is a simple and very scalable solution that satisfies our needs.

 

Here it is:

document.body.addEventListener('click', function(event) { if (event.target.matches('[data-adobe-view]')) { if (typeof adobe !== 'undefined' && !!adobe.target && typeof adobe.target.triggerView === 'function') { adobe.target.triggerView(event.target.dataset.adobeView) } } });

 

This overcame some issues we found with the onclick approach, whereby our use of Rocket Loader (Cloudflare) was interfering as per: https://stackoverflow.com/questions/65449689/cloudflare-seems-to-be-blocking-google-analytics-onclic...