Expand my Community achievements bar.

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...