Expand my Community achievements bar.

SOLVED

Adobe Analytics on Salesforce site via Adobe Launch

Avatar

Level 2

We are building a new product with a website built via Salesforce (I found one unresolved article from 3 years ago but nothing else on the community).

 

- The site is primarily a single page application so no page refreshing

- The main user journey is an application process with "pages" based on flows

- A flow is a Salesforce mechanism for automating business processes and consists of steps that manipulate data, make decisions and show the data

- The screens use Lightning Web Components to show the data which Salesforce transforms into html

 

While I have managed to get an initial Adobe Analytics call to fire upon first page load, I haven't been able to track any field interaction, nor have I managed to pick up any custom events.

 

An example we tried was to fire this custom event when the page loaded and a rule to pick up the event.

 

this.dispatchEvent(new CustomEvent('Salesforce','Page1'));
Rule looking for custom event called 'Salesforce' didn't send any data back to Adobe Analytics but console log shows the custom event fired.

 

- What is the best method to track page changes? Should we fire custom events when a user clicks the NEXT button?

- How would I track field interactions on a single-page application... I appreciate this is quite a broad question but would the site being a single-page application impact this?

 

Any help appreciated.

 

Thanks,

James

1 Accepted Solution

Avatar

Correct answer by
Level 8

@Jmaguire - If you want to send a payload to Launch as part of your custom JS event, try something like the following:

var event = new CustomEvent("Salesforce", {
  detail: {
    page: "Page1"
  }
});
document.body.dispatchEvent(event);

Note how the custom properties are part of the "detail" object. This means that in your Launch rule you can reference event.detail.page to return the "Page1" value from your custom JS event. (I'm betting that in your test, you didn't see the payload in the console only because you did not use the "detail" object approach described here. See this article for more info.)

 

(To those who say, "just call _satellite.track()" from your code, I hear ya. However, not everything that can benefit from this information will always be in the TMS. And, from experience, it's nice to have a generic layer between the website and your tracking that ensures a common, consistent point of origin. Keeping third-party vendor code dependencies out of the core site code is also a plus.)


Specific to your other questions:

  • What is the best method to track page changes? Should we fire custom events when a user clicks the NEXT button?
    • You could rely on custom JS events as you've described (and outlined above).
    • You could trigger rules based on URL or hash change, assuming that is reliable enough for your situation.
    • If the platform triggers an event or pushes to a data layer on route change, you could monitor for those to occur and trigger your Launch rules when they happen.
  • How would I track field interactions on a single-page application... I appreciate this is quite a broad question but would the site being a single-page application impact this?
    • Are you talking about form fields, or more generally referring to user interactions such as link/button clicks, etc? What are you looking to monitor/measure?

View solution in original post

9 Replies

Avatar

Employee Advisor

@Jmaguire Here is the documentation which can help in implementation adobe analytics through Adobe Launch for Single Page applications 

 

https://experienceleague.adobe.com/docs/analytics-learn/tutorials/implementation/spa-pages/using-bes...

 

Hope this helps

Avatar

Community Advisor and Adobe Champion

Dear Jmaguire,

The best way is to use Direct Call method from Adobe Launch and set the dimensions/events whenever the Direct Call is triggered from the page [As Page View i.e. s.t()].

In Adobe Launch, we can add key value pairs/parameters along with Direct Call, so sending the values from the page to Adobe Launch for variables assigning is much more easier.

There are few other workarounds, but i prefer this based on my experience with Adobe and racing issues related to the timings.

Link to go through: https://www.digitaldatatactics.com/index.php/2018/08/24/cross-post-from-33-sticks-direct-call-rules-...

Thank You, Pratheep Arun Raj B | Xerago | Terryn Winter Analytics 

Avatar

Correct answer by
Level 8

@Jmaguire - If you want to send a payload to Launch as part of your custom JS event, try something like the following:

var event = new CustomEvent("Salesforce", {
  detail: {
    page: "Page1"
  }
});
document.body.dispatchEvent(event);

Note how the custom properties are part of the "detail" object. This means that in your Launch rule you can reference event.detail.page to return the "Page1" value from your custom JS event. (I'm betting that in your test, you didn't see the payload in the console only because you did not use the "detail" object approach described here. See this article for more info.)

 

(To those who say, "just call _satellite.track()" from your code, I hear ya. However, not everything that can benefit from this information will always be in the TMS. And, from experience, it's nice to have a generic layer between the website and your tracking that ensures a common, consistent point of origin. Keeping third-party vendor code dependencies out of the core site code is also a plus.)


Specific to your other questions:

  • What is the best method to track page changes? Should we fire custom events when a user clicks the NEXT button?
    • You could rely on custom JS events as you've described (and outlined above).
    • You could trigger rules based on URL or hash change, assuming that is reliable enough for your situation.
    • If the platform triggers an event or pushes to a data layer on route change, you could monitor for those to occur and trigger your Launch rules when they happen.
  • How would I track field interactions on a single-page application... I appreciate this is quite a broad question but would the site being a single-page application impact this?
    • Are you talking about form fields, or more generally referring to user interactions such as link/button clicks, etc? What are you looking to monitor/measure?

Avatar

Level 2

Hi Brian, many thanks for your response. I'll take a closer look but definitely sounds helpful.

 

In terms of field interaction tracking, we would firstly like to track form fields. Eventually, link and button clicks may be something we want to track, but in the first instance we want to track application journey drop out to see if a specific field is causing high dropout.

Avatar

Level 2

Hi @Brian_Johnson_ ,

 

The team have added the custom event snippet you supplied to load when the page initially loads. For my rule, do I simply need to set the rule as below?Rule.PNG

Avatar

Level 8

@Jmaguire - That should work, but I would probably change the config to "specific elements" and focus the event on the body:

 

evolytics_brian_1-1631800191102.png

 

Avatar

Level 2

As always, many thanks for you help Brian.

In your example you used the following:

var event = new CustomEvent("Salesforce", {
  detail: {
    page: "Page1"
  }
});
document.body.dispatchEvent(event);

I'm wanting to trigger other events based on different page names, ie. a rule to fire when event.detail.page = "Page4". Is this possible? Or would it be better to look for some sort of hash/code change and build the rule on that? 

Avatar

Level 2

Hi @Brian_Johnson_ not sure if you know of a solution to firing a rule based on a page name, ie. fire rule when event.detail.page = "Page4"? Unfortunately the dev team have given all of the pages in our journey (around 25) the same custom event name of Salesforce.

Avatar

Level 8

@Jmaguire - Tracking form interactions can be tricky, and it generally requires some amount of custom logic. At a minimum, you need:

  • A way to identify the form - What's the form name/ID? 
  • A way to differentiate between when a visitor SEES the form and when the START completing the form
  • A way to identify which form field(s) the user has interacted with, including always knowing which field they most recently touched or changed
  • A way to identify when the user successfully completes the form - Is this when they submit the form? After any validation is successfully passed? On the same page or another page?
  • A way to identify when the user abandons the form - If the SEE the form, but never START the form, is that an abandon? Or, must they START the form to consider it an abandon?
  • A way to know which form(s) to monitor for interaction/abandonment tracking - If not monitoring ALL forms on your site, how will you identify those that should be monitored?

I know this doesn't answer your question directly, but hopefully it offers some insight on what needs to be considered. Depending on the structure of your site, you may need to enlist the help of your developers to account for how you intend to monitor your forms.