Angulartics2 with Launch Provider | Community
Skip to main content
B
bobagrand
Level 2
January 30, 2019
Solved

Angulartics2 with Launch Provider

  • January 30, 2019
  • 15 replies
  • 15560 views

I am looking for additional guidance around using Angulartics2 framework with the Launch, by Adobe provider to implement data collection for Adobe Analytics. I am able to make it work but I am looking for best practices, suggested patterns, success stories, reusable components, etc. Any help from experts is greatly appreciated. Thank you.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by Stewart_Schilling

    Please take a look at the Data Layer Manager and AA Product String Builder extensions from Search Discovery.

    The Data Layer Manager provides a standard way for applications to trigger Launch rules and to access the information in the data layer. It also cleanly handles the issues around asynchronous Launch load by de-queuing any events pushed prior to the Launch init.

    I have an update coming very soon that will provide:

    1) A new event type (Data Layer Push)

    2) A new data element type (Context Aware Data Element) that ensures that application context is properly preserved when referencing a data layer value.

    The interface from the application is pushing events onto a data layer array. For example, to trigger an event representing a "Product Added" (to cart), the following might be the application's action:

    window.appEventData = window.appEventData || [];

    This would trigger any rule that is configured to use the Data Layer Manager > Data Layer Push event with Event set to "Product Added".

    Launch can have as many rules as needed triggered off the event that was pushed (and using the payload data that was passed).  An example of an AA action sequence might have "AA: Clear Vars" > "AA: Set Vars" > "AA Product String: Set Vars" > "AA: Send Beacon".  The "AA: Set Vars" action would set the "prodView" event and any other simple "s" variables.

    The "AA Product String: Set Vars" action would handle the Product String setup as below:

    I think that if the Angularitics system included a configurable way of filtering the slew of Angular lifecycle events to those that we care most about and a way to transform scope into just the desired attributes the solution would be really strong.

    15 replies

    Show previous replies
    Urs_Boller
    Community Advisor
    Urs_BollerCommunity Advisor
    Community Advisor
    June 19, 2019

    the problem is not the dataLayer, it is how often "angular" pushes data. basically, "onroutechange" it is too early since a lot of information do not yet exists. and later are only the single components which mainly handle the content itselfs. that means "Angular" (or website) needs sort of "buffer" to pre-store information and send it out to dataLayer as soon as the last (relevant) component has finished/fetched data...

    Stewart_Schilling
    Community Advisor
    Stewart_SchillingCommunity Advisor
    Community Advisor
    June 19, 2019

    The way I'd approach this using Data Layer Manager is :

    1) Create an AA PostTrackCallback that clears vars after each beacon.  (Forget about using the AA extension's Clear Vars action).

    2) Have the angular app push an event when a view change is starting.  Use that event to trigger a rule that resets the data layer

    3) Option1 -

         Trigger rules from each of the events that you care about which set AA variables but do not send a beacon.

         Trigger a rule from the last of these events that sets AA variables and ALSO uses the AA Send Beacon action.

    Option 2-

         Trigger a rule only on the last of these events and utilize the __meta.computedState of that last event to set all appropriate AA values and then calls AA Send Beacon action.  Accessing __meta.computedState of an event is best done using the Data Layer Manager's "Context-Aware Data Element" DE type.

    Option 3 -

         Create multiple rules, all triggered by the last event of the view change sequence.  Use rule order to sequence the execution of these rules.  Each rule could do part of the AA set variables work (this allows for conditional logic based on the info in the data layer).  The rule with the highest "rule order" would then be responsible for sending the beacon.

    Anyway.  I think the first things to consider are :

    1) It's fine for an event to be pushed to the data layer but not trigger a rule in Launch.  The payloads of these events may be accessed later via the comptedStates.

    2) It's fine to have rules that are triggered by data layer pushes which set AA variables but do not send a beacon (as long as we know that later rule will be sending the beacon).

    I hope that this gives some food for thought.   Also, if you'd like to buy me a ticket to Switzerland, I'd be happy to talk in person!

    Cheers,

    -Stew

      Urs_Boller
      Community Advisor
      Urs_BollerCommunity Advisor
      Community Advisor
      June 19, 2019

      Hi stewarts16448458​  if you make it to Switzerland, would love to meet you!

      regarding the issue: the problem is that there are 1:n components on the page every may or may not add data. and you do not know which one is the last and if more pushes are coming to the DL.

      example: page loads a "dashboard" with several components. user can add/delete components as he wishes (not to mention that they might be re-arranged). from some of those components you want data, some are "just for decoration". that means the devs need to find a way to store all the relevant data and figure out when everything is loaded. I do not see any chance to detect the "last push" within Launch. what might be an option: if devs can detect (based on template), how many pushes should follow, that would allow me to install a "counter" and fire on "zero left".... however, waiting for the devs to come up with a solution

      maybe I need to get into Angular and try to build an example app - at least I might understand where the problem is ...

      jantzen_b
      Adobe Employee
      jantzen_bAdobe Employee
      Adobe Employee
      March 24, 2020
      Do any of the answers below answer your initial question? If so, can you select one of them as the correct answer? If none of the answers already provided answer your question, can you provide additional information to better help the community solve your question?
      A
      arianadavis
      April 3, 2020
      I'm currently using Angulartics2 also & wanted to see if you able to come up with a solution in connections to implementing this correctly and was able to retrieve proper feedback.
      Terms & ConditionsAccessibility statement

      Loading footer...