Hello, this is um a recording of these custom event, listeners for google analytics in the shadow dom uh for the middleman website. So um I've got these instructions here, but this is just sort of like a video validation, so people can watch it quickly and kind of get a sense of how this all should work. So, first up I've got this branch locally and I've started my middleman server. Here it's on localhost.

I think that this will work in the review app, um but I can't fully remember if we have google tag manager enabled there or not, but it definitely works locally. So I'm just going to refresh real fast.

um I've got this bookmarklet that I grabbed from dennis, uh which adds an unload listener to your current page. So I just click it, um but I added the actual javascript in there in the instructions you just add before unload and you basically prevent default and uh that'll. That means, when you try and click a link, you'll get this leave site confirmation. You can click cancel and keep it there. So I just did step one actually of the confirmation, so I'll show you.

I clicked this gitlab logo. Excuse me, and uh on the window dot data layer. We should see see a bunch of events. We see this custom event, click event and then inside we have this custom event object and then you'll see, there's some different values: there's nav header, nav level, one nav level, two nav level. Three. um This only has nav header data for logo. um I think that is correct. Dennis please. uh Let me know there's also original event.

Data too, which gives us you know we can dig deeper in there if we if we need to um and then, if you uh click into like y git lab and then click like the y git lab link again cancel, there's a bunch more events here, because it grabbed all those events right. So we have the this should be. I think the first custom click um we'll see that, because that is 43 here, yep 43.. uh This is probably that when I clicked into the page, this is when I clicked open the click open.

The menu and you'll see there's no data here, because we haven't actually clicked any of the links, and then this should be where I clicked on that. Why gitlab page and so in the custom event, you'll see one two and three are y git lab which matches what we have in uh where's the actual link.

Here we go nav of one now level, two nav level. Three, uh I think, based on my conversation with dennis this is sufficient for the requirements, um but if it isn't, let me know what else we need to get through there, and hopefully this this works. I also I added you'll see in the code here I took the snippet that we had found uh from that blog post and I sort of um I adjusted a little bit to be uh sort of like more modern javascript.

I also like it's verbose like there are cleverer ways to do this, but because I think that many people like in the future will need to like understand, what's going on here or people who don't write javascript all day, will I hope I I wrote it sort of in a verbose way with a bunch of comments uh and links back to this issue so that people could sort of follow through in what we're doing here.

I think this also uh removes the issues we had with some javascript errors that were getting thrown because we were accessing uh things that don't exist or that did not exist initially. So this has some checks to like you know, we only ask for this data if there is data to be found uh that here's that event, so um I think that's about it. uh I hope this is useful and uh I think we think we solved the thing thanks for watching.