I'm wanting to create a variable to grab the username from a landing page (assuming it's possible). In my attached examples, I'd like to grab the text "Landing_page_test".
I'm just learning CSS so I'm not able to single out just that text.
Any thoughts/suggestions would be much appreciated! enter image description here
Console
Elements Pane of Landing Page
document.querySelector returns an element, not the text. Add .innerText
Try it out on this page: document.querySelector("a.question-hyperlink").innerText to get the name of the question.
But you probably don't want to do it as custom html tag. You probably want to do it on click. in that case, you have {{Clicked Element}} variable in GTM, of which you can also get .innerText, or get its .parentElement and further navigate DOM from the clicked element as you wish and get whatever you need.
Here's the html of the Location & Date/Time text blocks
Text Block
Related
I want to be able to know exactly which element from a class has been clicked. I enabled the text option in Tag Manager:
But it's still not visible in the click object. But it wouldn't pick it up, since the tag containing the text is nested in the clickable element. Can I add a custom HTML attribute to be able to identify which element has been clicked?
<div class="card-content"> //<---- clickable element
<i aria-hidden="true" class="card-icon material-icons">business</i>
<h3 class="card-title">Company details</h3> //<--- clicked text
</div>
The best way to figure it out is to use the "Preview & Debug":
Activate it
Go to the page where you want to test (you should see now a new box at the bottom)
Click on the element
Check the variables in the debug box. Especially check the click.element data.
My guess is that since there is no "real" text in the div box, just children tags, no text can be discovered.
There are different options to solve it:
add the text as data-attribute to the div and use the click.element data
use a data-layer push event
if you know JS you can use the click.element data in a JS variable and traverse down to the h3
If you are going to keep your code as it is, you could create a custom variable, using Custom JavaScript.
In order to do so you need to first create the custom variable, choosing the Custom JavaScript type:
This code should do the job (I tested id)
function() {
return {{Click Element}}.closest('.card-content').getElementsByClassName('card-title')[0].innerText;
}
The custom variable will return the text inside .card-title.
To test the custom variable, you may create a dumb HTML tag with a console.log script, replacing Inside TXT with the name you gave to your custom variable:
<script>console.log( {{Inside TXT}} )</script>
The trigger should be a Click All Elements.
When previewing this tag, the captured text should appear in your console, as well as in the debugger panel.
Reading again your question, I wonder if you are going to have several .card-title items inside the .card-content. In that case, this custom variable will not work. Let me know what is the case.
Also, the code could be simpler, but I am not really sure on how is it really going to work in your site, so this one seems more reliable, since it works clicking anywhere in the element.
EDIT:
In order to test it, after you click an element, a new "Click" will appear in the left pane (Summary). There, in the Variables tab, you will see the variables captured by the click. The data will be stored under the variable name you gave to the variable.
Webpage opens one popup, in that popup I have a list of pets. like dog, cat, fish, etc. each element is a link, and defined as below in css. but all of them have same values for all of the attributes, like div class, ng-bind, ng-click, etc. only one difference is text. I am not getting how to select a specific value using this text.
Both of the images are attached for reference. you can check the CSS code as well as the application popup.
Application popup
Css Code
Please help me out....
In the below xpath example I'm assuming that this list is uniquely referenced using the #ng-repeat attribute and with that the following reference will become a unique one: //div[#ng-repeat='category in allCategory' and text() = 'Cow/Bull']
Partial matching of the text with xpath, just a little modification to the first answer.
//div[contains(text(),'Cow/Bull') and #ng-repeat="category in allCategory"]
I am using Simple HTML Dom to extract information from a remote source. I would like to get all href links that contain a particular piece of text (not all on a page). I have tried
->find('a[href*="/place"]')
and
->find('a[href="/place"*]')
and
->find('a[href="/place*"]')
but this returns empty results.
The href I am trying to get must begin with the text "/place".
Any suggestions?
Thanks
Match elements that have the specified attribute and it starts with a certain value, use [attribute^=value].
->find('a[href^="/place"]')
Ref: http://simplehtmldom.sourceforge.net/manual.htm#frag_find_attr
I do not now this app, however did you try using the asterisk like so ?
>find('a[href="/place*"]')
I'm trying to get the value of a form field on submit using jQuery. However when I try to alert it, it's shows up as undefined, with text in.
var title=jQuery('#fields[field_4f52672267672]').val();
alert(title);
It's got a funny ID though because I'm using a form plugin to create my form. When I inspect the element it simply shows the value attribute with no value beside it, even when it contains text. Can anyone explain what is going on please?
I've attached a screenshot of the field inspected with chrome's inspector panel.
var title=jQuery('#fields\\[field_4f52672267672\\]').val();
Into selectors you have to escape with 2 backslashes.
First, I am a new at webpage programming and I didn't seem to find a similar question to address the situation I am trying to figure out. Maybe I wasn't using the right terminology...
I have a parent html file (House.html) with essentially two iframes displayed ("room" and "info"), see below.
House.html<br>
-iframe "room"<br>
-iframe "info"
iframe "room"<br>
-Room.html<br>
-->link "link_A"<br>
-->link "link_B"<br>
iframe "info"<br>
-A.html (some text)<br>
-B.html (some text)<br>
Within the "room" iframe I am loading Room.html where there are multiple links contained (link_A and link_B). Clicking a link (link_A) is supposed to change "info" iframe to show A.html. Again, clicking link_B is supposed to change "info" iframe to show B.html. All html pages are on the same domain.
I understand how to link a child to a parent, but I am trying to figure out how to display different html pages in a specific iframe within a parent html page from a third html page.
Can anyone point me to an answer? Would I need to use an if() function in House.html and a target value from link_A or link_B?
From http://webdesign.about.com/od/iframes/qt/target-links-iframes-and-frames.htm
When you create a document to be inside an IFRAME, any links in that frame will automatically open in that same frame. But with the target attribute on the link (the A element or AREA element) you can decide where your links should open.
You can choose to give your iframes a unique name with the id attribute and then point your links at that frame with the ID as the value of the target attribute.
For your specific example, it would look something like:
Page A
Page B
You could use JavaScript to change the src attribute of the second iframe. You can do that with jQuery - e.g. put this code into iframe1 (untested).
$('a').click( function() {
$('#iframe2', window.top.document).attr('src', 'new-src.html');
});
Note that the parent page and the frames need to come from the same domain and subdomain (due to the single origin policy). If that's not the case, you would probably need to reload the whole page, by putting target="_top" in the link inside the iframe, and changing the src on the server side.