Blazor Server

[scottkuhl]

Is there any guidance on how to setup Adobe Analytics with Blazor Server?

[Alexis_Cazes_ · Accepted solution]

I would believe the best course or action would be to deploy Adobe Launch script on your blazor server web page so the html web page and then reference to adobe launch js ibrary. I found these documentations that can help:

https://visualstudiomagazine.com/articles/2018/08/01/integrating-blazor-javascript.aspx

https://happysnailprogramming.com/2021/02/22/using-javascript-in-blazor-pages/

Now Adobe Launch in itself does not need you to call any methods as per say you can simply use the features provided by Adobe Launch to build your data elements and rules to trigger the code you need at the right time with the right content. 

I have not worked with Blazor but I would expect that it works a bit like React or any other new code, it builds your HTML code dynamically so the HTML DOM and DOM API will still be available to you and for Adobe Launch to collect all of the data your need. 

[scottkuhl]

So once the script is loaded in a SPA, does it detect URL changes?

[Alexis_Cazes_]

First please find some documentation that can help you:

• Using Best Practices when Tracking Single Page Applications (SPA) in Adobe Analytics | Adobe Analyti...
• https://jimalytics.com/adobe-launch-guides/adobe-launch-rule-events-guide/

I only dealt with React SPA so I will base my answer on this and hopefully it will help. 

When you do not use and SPA you would rely on the Page load top event to trigger a rule in adobe launch to send a page view for analytics. For SPA it is different as this event if only sent when the library initially loads and will not be triggered on content change so in React world for pages it would be route changes.

Another aspect you need to consider is how the URL changes, is it the URL in itself that changes or is it the hash that changes. Depending on the behaviour that is configured on your blazor server we will configure Adobe Launch rule differently.

By default Adobe Launch will not listen for any SPA page changes you will need to configure it yourself and there are multiple ways to achieve this. I will list some of them here.

1. Out of the box History change event.

From the second link from jimanalytics article:

---

---

---

The History Change event trigger is particularly useful for Single Page Apps. Users will navigate between pages and aside from the click, the only way to determine when a user goes from Page A to Page B is by using the URL. This is also commonly seen on pages that have a Frequently Asked Questions section – users will click on a link and it will scroll them down to the question. These will often update the URL without reloading the page. The History Change event is how you monitor that URL.

A good way to see this in action is by clicking on an item from the Table of Contents within this article. Watch the address bar update. That’s a history change.

---

So configure a rule using this event and initially just add an action that either use console.log or an alert and see if it triggers on each of URL changes.

2. Use data element change event

In this solution you first need to configure a data element that returns the URL value. You can either use the out of the box functionality of the data element features to grab the values from the URL or write your own custom code. For example for my project I used custom code to target specific part of the URL.

Once you have done this, create a rule, select event as Data Element Change and add the name of the data element that you previously created. Adobe Launch will pull at regular interval I believe every 1seconds and evaluate if value changed. Same as before using an action with console.log or alert will allow you to validate if this option works.

3. Use a custom javascript event

So based on documentation that I previously listed https://happysnailprogramming.com/2021/02/22/using-javascript-in-blazor-pages/ you can configure in your code to emit a custom javascript event each time URL/Route is updated. I believe there should be some code for Blazor Server that would allow you to achieve this. An event like pageTransition would be ideal. I would also add some payload to this event so you can leverage it in your adobe launch rule.

Once you have completed this step, create a rule and for event choose custom event and reference the event that you configured in Blazor server source code, the one that should be emitted.

For the action add a console.log or alert to validate option is working.

This option would be the fastest in terms of code execution.

4. Data Layer option

You would have noticed that in the SPA documentation from Adobe they mention the use of a data layer. If you have not started work on this, I will warn you that it will be a big investment from your dev resources and needs to be carefully planned. While the use of a data layer will bring huge benefits on long term for analytics and other marketing/personalization products implementation, you will need to take a step back and carefully define the data layer for future use.

In order to be notified if a data layer has been updated your data layer will need to contain an array that you can evaluate the size to know if the something changed. You can then configure a data element and use the data element change event as above. There is another solution that can allow you to achieve auto-tagging state but that is a more complex approach. I will post some content on the community on coming month on this so if you are interested about it please follow me and you should be notified.

Hope this helps.

[scottkuhl]

Thanks, I will review this and see if we can get it integrated.