User Tag with child CSS element

[Vakho]

Hi there. 
 I've read every topic on the forum and documentation on how to make User tagging work with CSS, and it seems I'm doing everything right but still, it doesn't fetch the users from the front end. 

My actions are next: 
1) Inspect the element on the front page
2) Copy CSS selector where the username is
3) Paste it to the User tag 
my user tag looks like this : 
#wrapper > div.navbarmaincontent > nav > ul > li.dropdown.open > ul > li:nth-child(1) > a

I tried to check it in the console with the command : 
document.querySelector ('#wrapper > div.navbarmaincontent > nav > ul > li.dropdown.open > ul > li:nth-child(1) > a');
<a href=​"/​UserProfile">​…​</a>​

and it returns a particular HTML with a username. : |
<a href="/username_prof"><i class="fa fa-user fa-fw"></i> Username & Lastname </a>

Did I miss something else? Any hints are highly appreciated. 

[Romanenkov_Al3x · Accepted solution]

Hello.

Without exact page it is very difficult to answer what is wrong.

Maybe the main reason of the problem that you try to catch this information from "form". 

Personally, from my experience, I try to avoid getting username from forms by CSS selector.

This is simple example with form:

In this example - CSS selector = "#Email"

I would recommend looking for a global JS variable - which contains the username. The CSS selector works well if, for example, you have static content "Welcome, %username" in the "right" corner of the page.

Also you can try to use JS DTRUM API Javascript function (you supply the user name as the parameter):

dtrum.identifyUser("some@gmail.com")

 Perhaps other colleagues have a positive experience of using CSS selector and will response differently than I.

Regards,

Alex Romanenkov

[Vakho]

@Romanenkov_Al3x ,
I'm sure for 90% that the problem with css selector is because JS (OneAgent) loads first and only after that css is loaded. So, css selector is trying to fetch before it's generated. 

I agree that JS variable is the best way to get the user name, or maybe server-side requests will work better. 
Anyway, I assume it's a common problem based on the application architecture, so I will implement JS var, which will work.