ÃÛ¶¹ÊÓƵ

DocumentationTargetÃÛ¶¹ÊÓƵ Target Tutorials

Using the Visual Experience Composer for Single Page Applications (SPA VEC) in ÃÛ¶¹ÊÓƵ Target

Last update: Sat Oct 16 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Beginner
  • User

The SPA VEC enables marketers to create tests and personalize content in SPAs in a do-it-yourself fashion without continuous development dependencies. The VEC can be used to create A/B Tests and Experience Targeting (XT) activities in apps built with popular frameworks, such as React and Angular. Watch the following video to learn how to create activities using the SPA VEC.

Overview

  • The SPA VEC can be used to create A/B and Auto-Allocate tests and Experience Targeting (XT) activities
  • The SPA VEC does not support Auto Target, Automated Personalization, or Recommendations activities
  • The SPA VEC supports A4T, Experience Cloud Audiences, and Customer Attributes integrations
  • All VEC actions are supported in single page apps, including custom code
  • VEC actions can be applied to a single view or to the page load event
  • Different modifications can be added to different views without having to use the Additional Pages option
  • at.js 2.0+ and the adobe.target.triggerView() function must be implemented in the app before you can use the SPA VEC

Intended Audience

  • Business Practitioner

Transcript
Hi, I’m Daniel Ray, Technical Marketer at ÃÛ¶¹ÊÓƵ. In this video, I’m gonna show you how to create activities in our Visual Experience Composer for Single Page Apps also know as the SPA VEC. So here’s my React Single Page Application with at.js 2.0 in triggerView already implemented. I showed the implementation in a separate video if you wanna check that out. Now I’ll go to the Target interface and create a new activity in the VEC. The SPA VEC is compatible with both A/B and Experience Targeting activities. I’ll create an A/B activity and open my SPA. When I say SPA VEC, it’s really the same Visual Experience Composer that you use on regular webpages but some additional capabilities appear when you open a Single Page App with triggerView implemented. Notice how my current view name is displayed at the top of the Modifications pane. I can go ahead and make a change to my view. Notice how all of the VEC options are available including the Custom Code option. I’ll change this promo image at the top. Now, say I wanna make some changes to other views, I can click on a link and select Navigate To This Link. Note how it now shows About as my Current view and still has retained all of the changes to my Home view. So, you don’t need to use the Multipage option when creating a SPA activity with different changes to different views. On this view I’ll update my headline.
Now, say I wanna change a global element of my SPA like the top navigation. I’ll rearrange these navigation items. Right now, this action is associated with the About view, but if I click on this icon, it will move it to the Page Load Event. This will make sure the navigation gets rearranged whenever the SPA first loads. Now, let me complete the activity setup and we’ll take a look at the results. You can use Experience Cloud Audiences, Customer Attributes and A4T in your SPA VEC activities. You can also setup Click Tracking Metrics.
Now, when I open my SPA, I’ll see my navigation changes as well as the new promo on the Home view.
On the About view, I’ll continue to see my navigation changes in addition to my headline change. So that’s a quick tour of our Single Page App Visual Experience Composer. Have fun with it.

Additional Resources

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