cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

CSS selector for user tagging

Christopher_Cha
Dynatrace Mentor
Dynatrace Mentor

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

31 REPLIES 31

gautier_begin
Advisor

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
Dynatrace Champion
Dynatrace Champion

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

Hi @dave_mauney 

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

Thanks.

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

@dave_mauney Could I ask you to share again please?

HowToSpecifyUserTagCSSSelector.pptx (expires July 27th, 2023)

@dave_mauney Could you share once again please?

Try the attached Powerpoint above.

Here is a copy of the Powerpoint.

Christopher_Cha
Dynatrace Mentor
Dynatrace Mentor

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

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


just to clear details:

to get value of attribute title it should be:

#navBarUserInfoTextId > span.navTabButtonUserInfoText.navTabButtonUserInfoWorker@title



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

 

rohan1shah
Contributor

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?

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.

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

rohan1shah_0-1685722310433.png

 

Update - This seems to work - 

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

rohan1shah_0-1685724386510.png

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:

rohan1shah_2-1685724472567.png

 

 

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

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

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

Still unable to get any output. 

rohan1shah_0-1686080069455.png

 

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

paolo_fumanelli
Advisor

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

 

paolo_fumanelli_1-1689089229258.png

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

 

 

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

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

@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")

 

Certified Dynatrace Master | Alanata a.s., Slovakia, Dynatrace Master Partner

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!

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.

Certified Dynatrace Master | Alanata a.s., Slovakia, Dynatrace Master Partner

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
Advisor

@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
Dynatrace Champion
Dynatrace Champion

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

Featured Posts