Best practices for Single-Page Apps

Avatar

Avatar
Ignite 1
Level 2
worldholder
Level 2

Likes

11 likes

Total Posts

9 posts

Correct reply

1 solution
Top badges earned
Ignite 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile

Avatar
Ignite 1
Level 2
worldholder
Level 2

Likes

11 likes

Total Posts

9 posts

Correct reply

1 solution
Top badges earned
Ignite 1
Boost 5
Boost 3
Boost 10
Boost 1
View profile
worldholder
Level 2

12-02-2018

What are the best practices for Single-Page Apps tracking using Launch? Basically, I'm looking for a robust techique for collecting / dispatching virtual pageviews (JS framework agnostic).

Here https://marketing.adobe.com/resources/help/en_US/experience-cloud/launch/c_extension-dtm.html I found that Launch Core extension contains events like “Custom Event” and “Data Element Changed”.  I suppose I should use one of these features, but not sure which one to select as I don’t know their pros and cons. 

On the web I found some examples for DTM only, I don’t know if they are applicable to Launch.

When working with GTM, I used custom events for these purposes. However custom events in GTM are just key-value pairs pushed into the GTM data layer. But in the DTM-related articles which I saw on the web custom events refer to something absolutely different: Javascript-native interface called CustomEvent: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

Any suggestions / documentation on this?

Thanks a lot!

Replies

Avatar

Avatar
Validate 1
Level 2
FOX007
Level 2

Likes

8 likes

Total Posts

16 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Validate 1
Level 2
FOX007
Level 2

Likes

8 likes

Total Posts

16 posts

Correct reply

1 solution
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Applaud 5
View profile
FOX007
Level 2

18-02-2018

For all our SPAs we use direct call rules which the developer would fire after the datalayer was ready. Custom events ion DTM I believe are page events such as button clicks, hash changes, etc. that trigger a rule to fire.

Avatar

Avatar
Validate 10
Level 4
stefanm38281801
Level 4

Likes

43 likes

Total Posts

51 posts

Correct reply

2 solutions
Top badges earned
Validate 10
Contributor
Shape 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 10
Level 4
stefanm38281801
Level 4

Likes

43 likes

Total Posts

51 posts

Correct reply

2 solutions
Top badges earned
Validate 10
Contributor
Shape 1
Give Back 5
Give Back 3
View profile
stefanm38281801
Level 4

19-02-2018

We've build a framework for tracking, in which we use for DTM / Launch Custom Events. With Direct Call Rules, you can only reference a "static" Digital Data object, which might cause race conditions if you're not managing your Digital Data Object correctly.

The advantage of Custom Events is that you can pass context data with the event; so we're passing the Digital Data Object as event data, and reference this directly from within DTM / Launch.

This works flawless within traditional page based sites, as with SPA's. In an SPA, Dev would just "trigger" a "Page impression" event. In a traditional page based site, the "Page impression" is a trigger call on document.ready.

Avatar

Avatar
Coach
MVP
StewSchilling
MVP

Likes

342 likes

Total Posts

278 posts

Correct reply

85 solutions
Top badges earned
Coach
Give Back 25
Springboard
Bedrock
Validate 1
View profile

Avatar
Coach
MVP
StewSchilling
MVP

Likes

342 likes

Total Posts

278 posts

Correct reply

85 solutions
Top badges earned
Coach
Give Back 25
Springboard
Bedrock
Validate 1
View profile
StewSchilling
MVP

01-03-2018

+1 on using custom events in preference to direct call rules in SPA environments.

+1 on letting the SPA tell Launch when a page has changed as it accounts for hard loads, and soft navigation equally well.

+1 on passing the DDO as the payload on the event (the presence of "event" as a free variable was sort of an easter egg in DTM). 

Avatar

Avatar
Validate 1
Level 7
jkunz
Level 7

Likes

201 likes

Total Posts

33 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 50
Boost 5
Boost 3
Boost 25
View profile

Avatar
Validate 1
Level 7
jkunz
Level 7

Likes

201 likes

Total Posts

33 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Boost 50
Boost 5
Boost 3
Boost 25
View profile
jkunz
Level 7

01-03-2018

I used to prefer using custom events Event Based Rules to using Direct Call Rules because DCRs couldn't handle additional conditions, but now in Launch, they can, so I think it's more a matter of preference.
But I agree, you definitely want to use one or the other to let Launch know when the new page view has occurred (after the new page view's data layer is in place).
Single Page Apps | Digital Data Tactics  has a bunch of documentation on Single Page Apps (both Launch or DTM).
And Setting up an Event-based Rule that be fired directly like a Direct Call Rule | Digital Data Tactics  has some use case and examples for Custom Events, and DTM Examples  has (buried in the source code) a working example.

Avatar

Avatar
Validate 1000
Community Manager
jantzen_belliston-Adobe
Community Manager

Likes

339 likes

Total Posts

2,338 posts

Correct reply

819 solutions
Top badges earned
Validate 1000
Springboard
Validate 500
Validate 250
Validate 100
View profile

Avatar
Validate 1000
Community Manager
jantzen_belliston-Adobe
Community Manager

Likes

339 likes

Total Posts

2,338 posts

Correct reply

819 solutions
Top badges earned
Validate 1000
Springboard
Validate 500
Validate 250
Validate 100
View profile
jantzen_belliston-Adobe
Community Manager

01-03-2018

Moderator Note: Since this question has turned more into a discussion, I'm going to change this into a discussion. The discussion will allow users to read each of these answers without the need to select a single one as correct.

Avatar

Avatar
Validate 10
Level 4
stefanm38281801
Level 4

Likes

43 likes

Total Posts

51 posts

Correct reply

2 solutions
Top badges earned
Validate 10
Contributor
Shape 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 10
Level 4
stefanm38281801
Level 4

Likes

43 likes

Total Posts

51 posts

Correct reply

2 solutions
Top badges earned
Validate 10
Contributor
Shape 1
Give Back 5
Give Back 3
View profile
stefanm38281801
Level 4

02-03-2018

I also use Custom Events

     1) due to the lack of conditional ruling in Direct Calls,

     2) DDL context: DC's can only read "the" static object... so if you would fire 2 DC's which might change your DDL in between distinctively, you're never sure if both DC's are reading the DDL at the correct moment for their context (race condition).

Since I'm working hard on changing from "page based analytics" into "event based analytics", which is more suitable for modern app frameworks (e.g. react, vue, etc...), proper DDL context on each event is crucial. If interested, please view my work on

xploregroup / xploregroup-webanalytics-demo — Bitbucket

This is the framework I mentioned earlier. The repo points to a set of other repo's with front-end code. The DTM translator holds the Custom Event implementation for DTM/Launch.

have fun...

Stefan

Avatar

Avatar
Coach
MVP
StewSchilling
MVP

Likes

342 likes

Total Posts

278 posts

Correct reply

85 solutions
Top badges earned
Coach
Give Back 25
Springboard
Bedrock
Validate 1
View profile

Avatar
Coach
MVP
StewSchilling
MVP

Likes

342 likes

Total Posts

278 posts

Correct reply

85 solutions
Top badges earned
Coach
Give Back 25
Springboard
Bedrock
Validate 1
View profile
StewSchilling
MVP

02-03-2018

Hi Stefan!

I'm interested in seeing that repo, but the link you gave is giving me an error.

-Stew

Also, if you'd like to connect on LinkedIn, here's my profile: https://www.linkedin.com/in/stewartschilling/

Avatar

Avatar
Validate 10
Level 4
stefanm38281801
Level 4

Likes

43 likes

Total Posts

51 posts

Correct reply

2 solutions
Top badges earned
Validate 10
Contributor
Shape 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 10
Level 4
stefanm38281801
Level 4

Likes

43 likes

Total Posts

51 posts

Correct reply

2 solutions
Top badges earned
Validate 10
Contributor
Shape 1
Give Back 5
Give Back 3
View profile
stefanm38281801
Level 4

02-03-2018

Hi Stewart,

the bitbucket node where the repo's are on seems to be down for the moment. Please try later.

Stefan

Avatar

Avatar
Coach
MVP
StewSchilling
MVP

Likes

342 likes

Total Posts

278 posts

Correct reply

85 solutions
Top badges earned
Coach
Give Back 25
Springboard
Bedrock
Validate 1
View profile

Avatar
Coach
MVP
StewSchilling
MVP

Likes

342 likes

Total Posts

278 posts

Correct reply

85 solutions
Top badges earned
Coach
Give Back 25
Springboard
Bedrock
Validate 1
View profile
StewSchilling
MVP

10-03-2018

Stefan,

Thanks for sharing that repo.  Awesome work.  I'm 100% in agreement with your thoughts on a movement away from page-based analytics and toward event-based analytics.  The event-based approach is much more flexible and can be used everywhere.  I think that it will fit especially well as a feeder to Adobe Launch but has the benefit of potentially serving any number of other consumers (i.e. any other client-side process that wants to listen for the events).

I also agree with you on the use of Custom Event Rules in preference to Direct Call Rules.  I'm very encouraged that we can now layer conditions on top of DCR's in Launch, but the ability to send event data directly to CER's is so much better in my opinion.

-Stew