How to pull data relative to the clicked element in Google Tag Manager

[@olgaannenko2296]

I cannot thank you enough, Julian! I had this button inside a slider in the header part of the website that I couldn't get being tracked via GTM no matter what I tried: Click Class - "nope", Click Element - "not today", Click URL - "what's that?", nothing, NOTHING worked. I was about to throw my arms in the air and give up when I stumbled upon this video. And I did it!! I managed to get this button being tracked after all! So, thank you, thank you SO MUCH!!!

[@romnaviche]

The button I wanted to track did not have anything unique to distinguish from similar buttons and I realized I couldn't use the click element variable to create the trigger I needed. This is exactly what I needed, thank you!

[@eduardofernandes9881]

Hey Julian, I really appreciate you talking about more advanced techniques on how to use GTM. Thank you so much!

[@richchoe5530]

OMG! I really needed this! Now I can use this to pull in variables for labeling on Google Analytics. This will save me a ton of work since it will pull it in automatically AND it is a variable (so I don't have to make a new tag and trigger for every single button on every single page. You are the best!

[@annaa7008]

I already used it with my element visibility triggers but in a different way (just with CSS Selector). This technique seems to be more effective! I'm gonna try it. Thanks for all your tips.

[@julien5053]

Thank you ! That's the first answer to an ecommerce project that I am working on : "How to set-up Audiences for Google Ads and Facebook Ads, with Google Tag Manager, for Dynamic Display Retargeting". (Google Merchant Center already set-up, and the same goes for Facebook Ads) The goal is to segment the audiences and target those who are more likely to buy the products, with Dynamic Display Retargeting. Especially, we have several audiences : those who have just seen the homepage, those who have been to a product page (without buying or adding to cart), those who clicked on Add to Cart (without buying).

[@frankthedsigner558]

This is AMAZING! Thank you so much. Had to watch it a couple of times to get into the swing of things but now I can link up all my elements using custom js. Thank you for the great videos, love this channel!

[@MeasureSchool]

Nice one Frank!

[@ZaraKayk]

These videos have been so helpful. I've only looked at GTM but I'll look up GA too. Thanks so much!

[@maggieto]

Thanks for the walk-through. This setup works as you're looking for a specific element like H1 which is usually used just once per page. If there are multiple elements of the same type, there will be an issue. I prefer .closest() or .parents() to avoid repeating parentElement multiple times.

[@MeasureSchool]

but that's jQuery, not vanilla JavaScript. So you will need to have jQuery loaded, which is not applicable in every case

[@MeasureSchool]

also: Even if there are multiple H1 on the page, this method should work. We are not searching for the H1 on the the whole page, but traversing upwards from the element that was clicked and looking for the next element that is H1. So it shouldn't matter how many H1 are on the page. And querySelector always returns the first element.

[@stephanhokanson9682]

I've been wanting to learn this for a while now. Thanks for sharing.

[@brendanchase404]

wow wish this video came out b4, thanks bro great work!!!!

[@paulmurphy4821]

what an absolute hero. Great work Julian!

[@AkankshaIngole]

thanks julian very detail knowledge

[@itsrodionraskolnikov]

This was incredibely useful. Thanks a lot!

[@MeasureSchool]

That's good to hear Rodion!

[@virginiakamala8921]

This is truly amazing, Thank you soooo much!!

[@beeroslava]

Woow, thank you for the great tutorial! I will check on the rest of your videos, this is so helpful! I was wondering how can you integrate this to Google Analytics in a way that tracks the number of t-shirts by name. I.e. Should I set up one goal using this click variable to be able to track how many of T-shirt 1 have been sold, and a different goal to track how many of T-shirt 2 have been sold? Or can I do this in one goal setup? Thanks!

[@JoshuaDHarvey]

This is a terrific video, thank you! If you ever get a chance to do a video that helps explain google ads cookies that would be great. Loving your channel though

[@rushdihameed798]

I hav done the tags but how do u generate a report from google analytics?

[@wellrafi3477]

thanks, it's work for me. very helpful

[@GenePage]

Great vid, but I wonder what happens next? You have the product title being loaded dynamically which is great, but I need to know how to get that to show up dynamically in Analytics so I can see how many clicks you got on Happy Ninja tag vs how many clicks you get on Woo Ninja? Goal Location won't narrow this down in my case because they're in a grid on the same page - url path. Please let me know if this is covered in another video.

[@dariialeliukh6781]

Amazing! Thank you so much!

[@reacher5394]

thx you Julian, and I have a little question, can I use this method to get the product value, so I can never need to use the data layer (which is writen before on the web page) !!! Is this correct ?????

[@santiagocontreras7890]

Thanks for this tutorial Julian! I was wondering if this technique can be used to track info in forms fields also, or if it´s only for text content in a page/article. Cheers!

[@MeasureSchool]

yes, could be

[@NicolayBell]

well that’s concerning… doesn’t that mean it could be used to track passwords as well?

[@AnsweringATPL]

Thank you for this video. I have a question though. How to pull data within the span tag .

[@MeasureSchool]

what do you want to pull? can you be more specific?

[@AnsweringATPL]

@@MeasureSchool Thank you for your response, sir. In this video, you teach how to pull data between tag DATA. my question is how to pull data inside tag i.e. . I am using GTM4WP and try to do add to wishlist tag for Facebook. Once again thank you sir

[@ankitgarg3518]

HI Julian, what if we need to set the custom java script code on Just Link? Because your video shows the parent element is fetching on "click" trigger. should we use the same code for "link click" or we need to change the code. Example: google_tag_manager["GTM-5GSLPT7"].dataLayer.get('gtm.linkelement').parentElement.parentElement.parentElement.parentElement.parentElement.querySelectorAll(".title-accordion").innerText

[@Hammadhussain47]

Can you please refer to the video where you explain how to track amazon affiliate link tracking through GTM thanks.

[@MeasureSchool]

oh... yes, of course. One method is kzbin.info/www/bejne/homyf4ucj7aZfNE and another kzbin.info/www/bejne/fYbRaYuNarKXaKs

[@Hammadhussain47]

@@MeasureSchool Great thanks man for the videos

[@alexandrakeogh]

I'm trying to pull out the aria-valuenow element nested deep in something like this:

[@akashmv6553]

Hi MeasureShool, I have a Pincode Field and a Check button, I want to capture the Pincode entered in that field. can you please help me with any tips on this. Thank you for your video's it helped me a lot.

[@AltGilani]

Will this still work in Google Analytics 4 setup?

[@ottz73]

I have a span tag wrapped in the button so when you click the span my information is in the button element but can't get back

[@WeightLossThatSticks]

Aren't a lot of these things already supplied to the analytics tags with the underlying software (e.g. WooCommerce). It seems that using tag manager is in a way complicating this whole process.

[@quality-analyticsd6-innova162]

This is very helpful, but seems to not be working for my specific use case. Same idea, when a user clicks on a cell, I want to return the title of the cell. I am able to get to the correct level, but still cannot pull the specific text. I have the element " and I am trying to output SweetSkate, but cannot grab that portion of the element. Any thoughts?

[@quality-analyticsd6-innova162]

I was able to grab the aria-label, but the actual issue is that there are multiple elements wrapped into "one" button. Some of the elements' parents reaches one level above the current click, while some are levels below. How do you account for that?

[@ilyasemenkov5492]

Thanks, Julian! I wonder if there's a reference on the query options list that we might also play with.

[@MeasureSchool]

not sure what you mean by query options list?

[@sarahcondon2621]

@@MeasureSchool I think I have a similar question. This tutorial makes sense for this specific need, but I don't know JS and am trying to reference something else in the parent/parents for different scenarios - like the class above click class e.g. section class, li class, etc.

[@MeasureSchool]

ah ok... you can google for "traversing the dom with javascript" and kind find a reference to the JS commands available. Also flukeout.github.com is a good little game to learn about css selectors.

[@beingrajbir]

I have some problem. I do in my Affiliate Website-there are many products in one-page. I put all the process and its only fetch the data of first product rest of the product will not display the title it will show the first product title only. Can You Help me on it

[@leonardobigardi7926]

Thanks, Julian! I tried this technique and it worked well for me but I noticed that I just can pull data when I click on a specific part of the button and not the entire button. I'm not working with "parentElement" function. Instead of that I'm using "children" function to get the data I want. After ("gtm.element") my CJS looks like that: children[0].children[0].children[0].innerText How can I adjust that to pull data from clicks on any part of the button?

[@MeasureSchool]

have a look into the closest function in JS

[@waqaswakeel]

Hy Julian! I'm Interested in your Paid Course but I see you are Charging Monthly Payment is There any One Time Fee Process. It is much better for me. And I also want to know you are also providing training related to Google ADS & Facebook ADs as well in same course. Ecommerce Selling training as well Thanks Regards Aryan khan

[@jayjayf9699]

With this technique I no longer have to use the Wordpress gtm plug-in by Thomas gieger ? I can use this method to get dynamic conversion values for my Facebook tag ?

[@MeasureSchool]

no, this is not a replacement for a proper dataLayer implementation

[@agarwalsunny4067]

There trick is more helpful on category pages where you have so many add to cart buttons and you want to pull specific clicked product id

[@MeasureSchool]

true that

[@GlennDaytonIV]

Perfecto!

[@richchoe5530]

What if there is more than one text within the "innerText"? how do you isolate the different text?

[@richchoe5530]

Never mind. I realized that I was using the wrong CSS selector!

[@ramcharankette4782]

can we have a video of adding to cart with enhanced ecommerce (like adding an ecommerce object to the datalayer by the site and getting that pushed to the analytics)

[@MeasureSchool]

thanks for the suggestion

[@Harris-baz]

I try to solve the problem in two ways, (of course the 2 ways can be wrong i dont now) so my problem is this: I want to make a click element 1. google_tag_manager["GTM-N3NC622"].dataLayer.get("gtm.element").parentElement.parentElement.querySelector("div.vrc-save-order-block").innerText but the show this "" and if i put it in Variables its dont work 2. google_tag_manager["GTM-N3NC622"].dataLayer.get("gtm.element").parentElement.parentElement.querySelector("div.vrc-save-order-block").innerHTML the show its correctly but also dont work at Variables Thank you very much, waiting for some help, greetings from Greece

[@sahilsunesara]

Hi I wanted to add content_ids in facebook pixel but i am unable to find variable or data layer in magento 2... so could you please tell me how will i get that details? Thanks in advance

[@MeasureSchool]

either you program in a dataLayer or you get a plugin that provides the info

[@sahilsunesara]

@@MeasureSchool sorry? I didn't get you? program in a dataLayer?

[@ChrisGriffinP]

Another great tutorial, Julian! This looks like a technique similar to one you explained in your DOM Element Scraping video (kzbin.info/www/bejne/pKmoio2qncetppY). Which technique do you prefer when trying to pull page information into the dataLayer? Thanks!

[@MeasureSchool]

no, they are similar, but not the same. With this method you can pull data RELATIVE to your click. With the other method you go from top (the document node) to the target, regardless where a user clicks