22 Replies Latest reply on Nov 15, 2018 11:45 AM by stewarts16448458

    Best practices for Single-Page Apps

    worldholder Level 1

      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.h tml 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!

        • 1. Re: Best practices for Single-Page Apps
          FOX007 Level 1

          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.

          • 2. Re: Best practices for Single-Page Apps
            stefanm38281801 Level 2

            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.

            • 3. Re: Best practices for Single-Page Apps
              stewarts16448458 Level 4

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

              • 4. Re: Best practices for Single-Page Apps
                jkunz Level 3

                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.

                • 5. Re: Best practices for Single-Page Apps
                  Jantzen.Belliston Adobe Employee

                  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.

                  • 6. Re: Best practices for Single-Page Apps
                    stefanm38281801 Level 2

                    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

                    • 7. Re: Best practices for Single-Page Apps
                      stewarts16448458 Level 4

                      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/

                      • 8. Re: Best practices for Single-Page Apps
                        stefanm38281801 Level 2

                        Hi Stewart,

                         

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

                         

                        Stefan

                        • 9. Re: Best practices for Single-Page Apps
                          stewarts16448458 Level 4

                          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

                          • 10. Re: Best practices for Single-Page Apps
                            Aaronius9er9er9er Adobe Employee

                            You can send event data with direct call rules too. Suprise! This was a recent addition. If you do:

                             

                            _satellite.track('youridentifier', { foo: 'bar' });

                             

                            You can access the detail similar to how you would for detail that you include on a Custom Event, that is:

                             

                            %event.detail.foo%

                            • 11. Re: Best practices for Single-Page Apps
                              pankajkarole

                              Interesting! Can you let us know how to reference event details with _satellite.getVar?

                              • 12. Re: Best practices for Single-Page Apps
                                Aaronius9er9er9er Adobe Employee

                                You can't, but I'd like to know more about your needs so we can try to address them. If you're trying to access that detail from a Custom Code condition or Custom Code action, you can just access the event directly, for example:

                                 

                                console.log(event.detail.foo);

                                 

                                If you want to get access to it from an extension's condition type or action type library module, you can do this:

                                 

                                module.exports = function(settings, event) {

                                ...

                                }

                                 

                                Event will come through the second parameter.

                                 

                                I'm aware the documentation surrounding this "event" object is less than optimal (non-existent?). I have this as an item I would like to spend time on in the near future.

                                • 13. Re: Best practices for Single-Page Apps
                                  stefanm38281801 Level 2

                                  and since Direct Call Rule is now just an "Event Type" like the others, you can add conditions (which was a major lack in DTM)... so DC could replace Custom Events if you want to fire something on an event, pass event data in the call, and on top have rule conditions...

                                   

                                  sounds nice.. will definitely give it a try...

                                  • 14. Re: Best practices for Single-Page Apps
                                    stewarts16448458 Level 4

                                    Sounds like _satellite.track is just a special kind of customEvent.

                                    Could you listen for _satellite.track events from outside of Launch?  If so, on what element are they emitted?

                                    • 15. Re: Best practices for Single-Page Apps
                                      Aaronius9er9er9er Adobe Employee

                                      No, you can't listen for _satellite.track events outside of Launch. It never hits the DOM.

                                      • 16. Re: Best practices for Single-Page Apps
                                        stewarts16448458 Level 4

                                        Thanks, Aaron.

                                         

                                        I think that's enough reason for me to stick with custom events over direct call rules. Unless there is some other benefit to DCR's that I'm missing.  It kind of makes me want to add an emitter action to the SDI Toolkit extension so that you could use Launch rules to send signals to other client-side stuff.

                                        • 17. Re: Best practices for Single-Page Apps
                                          FOX007 Level 1

                                          Aaron,

                                           

                                          Can you clarify accessing the event detail?  If I do this _satellite.track('home', {'name':'John'})

                                          console.log (event.detail.name)  is invalid - no detail property.

                                           

                                          Thanks

                                          • 18. Re: Best practices for Single-Page Apps
                                            Aaronius9er9er9er Adobe Employee

                                            Could you send me a URL to your library please?

                                            • 19. Re: Best practices for Single-Page Apps
                                              stewarts16448458 Level 4

                                              OK. Seven months later...    Better later than never?

                                               

                                              We just deployed a new extension to the Launch Production Catalog called "Data Layer Manager (free edition)".  It is built as a best practice approach to asynchronous embeds of Launch with data layer events that may come before or after Launch has loaded.  It blends a bit of the GTM dataLayer with a bit of the W3C CEDDL (but avoids most of the nonsense).

                                               

                                              Screen Shot 2018-11-07 at 6.16.52 PM.png

                                               

                                              Screen Shot 2018-11-07 at 6.13.06 PM.png

                                               

                                              We also just deployed the new "AA Product String Builder" which works REALLY nicely with the Data Layer Manager. Be sure to check it out if you are doing Adobe Analytics stuff.

                                              1 person found this helpful
                                              • 20. Re: Best practices for Single-Page Apps
                                                thomas.amsler Level 3

                                                Cool looks interesting, though a bit too late for me Also the Product String Builder. I'll have a look at it the next time I need to build product strings.

                                                 

                                                I decided to use direct call rules for the whole website, when I found out you can provide a payload as Aaronius mentioned in March. With this I have enough control over the events and the data they should process. I also changed the normal page load from pageBottom to a direct call but with a check if there is an SPA container on the page and gets only fired if there isn't. The SPA then fires an init direct call when it is ready which uses the same rule as the page load but we can be sure the app did all the necessary modifications to the datalayer.

                                                • 21. Re: Best practices for Single-Page Apps
                                                  stefanm38281801 Level 2

                                                  Nice... looks very familiar...

                                                  with the difference that we use a message queue instead of an event array "in between"... gives us some other options, like having multiple subscribers to the same message queue... messages can be cached, and replayed to a new subscriber... waiting for listeners to be subscribed (aka waiting for Launch/Analytics to be loaded)... prioritize "page view" message (aka it is called before any other event messages on the same page, so that page context can be served with the other events)...

                                                  I have some colleagues who have build this way of working on top of Angulartics in Angular2, making use of the Service queue principle to pass the events...

                                                   

                                                  But definite a very good approach to more event based analytics... and very useful...

                                                  • 22. Re: Best practices for Single-Page Apps
                                                    stewarts16448458 Level 4

                                                    Screen Shot 2018-11-15 at 1.27.07 PM.png

                                                     

                                                    In the version going up today (1.0.6) of Data Layer Manager, we have added getters on each event that provides __meta.computedState from the viewpoint of each event (to answer the question, "What is the combined state of this event and prior pushed events?").

                                                     

                                                    This allows the event context to be available (in conditions and actions) to any rule triggered by the event.  Soon the event context will also be available to data elements as well. 

                                                     

                                                    Screen Shot 2018-11-15 at 1.35.05 PM.png

                                                     

                                                    Event-based analytics!  YES!  I do hope that many people will find this useful.