CSS selector for user tagging

[Christopher_Cha]

Hey guys,

I'm in the midst of deploying Dynatrace Managed for a customer and I'm not really familiar with the CSS part for user tagging. We have identified the CSS element which contains the user name, but I'm just not too sure if the configuration is correct. Could you help me to verify?

As attached is a screenshot, and the highlighted part is the user name we want to capture. Would "#navTabButtonUserInfoText navTabButtonUserInfoWorker@title" work? As I will not be onsite until next week and customer is new to the product, I'd just thought of getting opinions here first...

Chris

[gautier_begin · Accepted solution]

Chris,

First, capture the correct CSS selector by selecting your element from the WebGUI, then click right and select Inspect. You have this option in Chrome and Firefox, not in IE.

Then in the HTML editor, click on "copy as CSS", past in Dynatrace and that's done

In some cases, that may not be sufficient because you are capturing extra characters or strings. Then use a regex that you will put under the "Apply cleanup rule" option in the "User tag" rule of your Dynatrace application.

You can also have a look here:

https://www.dynatrace.com/support/help/user-experience/analytics/how-do-i-tag-individual-users-for-s...

Regards,

[dave_mauney · Accepted solution]

Hi Chris,

Here's a brief step-by-step PowerPoint that may help also, especially if you want to test the CSS selector before you add it to Dynatrace:

https://dynatrace-my.sharepoint.com/:p:/p/dave_mau...

HTH,

dave

[Peter_Youssef]

Hi @dave_mauney 

Can you please share this PPT again as I've tried to access it, I find It's expired.

Thanks.

[dave_mauney]

I shared it again here:

HowToSpecifyUserTagCSSSelector.pptx

Our corporate policy is to set a 90 expiration on links shared on SharePoint, so the clock starts again now...

[anders_lundin]

@dave_mauney Could I ask you to share again please?

[dave_mauney]

HowToSpecifyUserTagCSSSelector.pptx (expires July 27th, 2023)

[Vidhyasagar]

@dave_mauney Could you share once again please?

[dave_mauney]

Try the attached Powerpoint above.

[dave_mauney]

Here is a copy of the Powerpoint.

[Christopher_Cha]

Thanks guys! The one that worked is #navBarUserInfoTextId > span.navTabButtonUserInfoText.navTabButtonUserInfoWorker.

[DavidePiras]

Great thanks for sharing this Chris, very helpful for user tagging in MS Dynamics!

[_r_k_]

just to clear details:

to get value of attribute title it should be:

#navBarUserInfoTextId > span.navTabButtonUserInfoText.navTabButtonUserInfoWorker@title

[DavidePiras]

This is not working anymore on latest version 9.1.x of MS Dynamics 365 on prem.

[rohan1shah]

Hello, I am trying to extract the name John for user tagging using CSS selector.

<a _ngcontent-sba-c1="" aria-label="My Profile" class="user-label ng-star-inserted" href="ABCD"><span _ngcontent-sba-c1="" class="check-dirty user-name">Hello, John</span><img _ngcontent-sba-c1="" alt="user" class="check-dirty user-profile" src="XYZ.svg"></a>

I followed the same instructions to copy the selector and this is what I input into the app config for user tagging. It still keep the User names in sessions as Anonymous:

#page-main-container > div.bmo-container > div:nth-child(1) > a > span

Am I missing something here which is not letting the user tag parse through?

[dave_mauney]

Did you test the selector in the dev tools console as covered in the PPT above?  I am no CSS expert, but you might want to try a selector of ".check-dirty user-name" and see if that works should be less "brittle" than the selector you are trying now.

[rohan1shah]

Yes I did test it, I get NULL as a response for some reason. Couldn't understand why:

[rohan1shah]

Update - This seems to work - 

document.querySelector("span.check-dirty.user-name").innerHTML

But when I input that as part of the User Tagging Rules, there still seems to be no change. All sessions show up as anonymous:

[dave_mauney]

And you are sure new logins have occurred after the change?

[rohan1shah]

Yes, I have been doing the logins myself and can see new sessions showing up from other users too in DT.

[dave_mauney]

The User Tag CSS selector "hint" says it will capture "innerText/textContent" so you may want to see what that gives in the console.   

[rohan1shah]

Still unable to get any output. 

[dave_mauney]

I would try the in-product chat for some help.  I am out of ideas.

[paolo_fumanelli]

Hi @dave_mauney , I'm trying to extract via css selector the content of <homepage-element> you can see below.

At first, I'd like to use a part of its content as action property.

In the capture expression I indicated this (following your very useful guide):

#body > app-root > app-homepage > div > div.element-wrapper > div:nth-child(1) > homepage-element

But unfortunately it's not capturing anything.

Do you have any hint for me?

Thanks
Paolo

[dave_mauney]

Buongiorno, Paolo...come stai oggi? 

 I am not a CSS guru by any means.  But if you can send me a bit more of the page, or point me to a public URL I can take a look. My email is dave dot mauney at dynatrace dot com. 

Ciao, dave

[paolo_fumanelli]

Grazie Dave spero anche tu 🙂

Unfortunately this is a brand new page and it's available only on our QA environment so I can't point you to a public URL. I sent you an email, thanks a lot

[Julius_Loman]

@paolo_fumanelli  it's not clear from the screenshot what the <homepage-element> contains.  RUM will capture the textContent attribute.

Based on your example you might want to try selector

homepage-element@country

to capture the country attribute from the element.

You can also use the browser's developer console:

document.querySelector("homepage-element")

[paolo_fumanelli]

Dear Julius, I finally managed to let it work by applying CSS selector in this way

#body > app-root > app-homepage > div > div.element-wrapper > div:nth-child(1) > homepage-element@country

Thanks a lot for your help!

[Julius_Loman]

You are welcome!  
I recommend leaving out the CSS hierarchy and rewrite the selector in a way so that any future modifications of the page won't affect it (for example nth-child). So unless there are no more homepage-element tags in your page, you can probably safely delete the part before it.

[paolo_fumanelli]

Well, that was also my concern so I tried that but it didn't capture anything, that's why I turned to the current solution where I take "Copy selector" as it is without any transformation...

[Slawa]

@Christopher_Cha This is just a temporary solution.
CSS is not best practice for this, espectialy with complex css path 
which can be changed with layout in any time.

Try to ask developers add JS variable or dtrum.identifyUser("xxxx") call for 100% reliable user detection

[dave_mauney]

I agree!  If possible, use more stable solutions as @Christopher_Cha mentioned!