GitLab Inbound Marketing, 9 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Google Tag Manager preview on about.gitlab.com

Description

Shane Rice and Javi Garcia look at the new Google Tag Manager preview and how it works on about.gitlab.com

A

I was like trying to take it, so that would help.

B

Hey everybody shane rice here with javi uh from the digital experience, team and recording a session today, where we're talking about google tag manager and uh debugging the preview through that, so just make sure that everything's firing that we want in google analytics.

B

So I'm going to share my screen really quick. That's.

A

B

You, of course, all right so um we're talking about this. Just a second ago uh before I hit record and um previously when you use google tag manager, it would load like a little window here overlay on whatever page you're on, and it would tell you like when you clicked on this. You know cta would say: oh you clicked on this link, here's what happened right, um but because that didn't maintain a state between page loads.

B

So every time you loaded a new page, it would completely refresh that preview, and so you couldn't really see what was happening. If you clicked on something that took you to a different page or different part of your website.

B

That was an area where it wasn't useful, so google tag manager made some changes where now they've added this dedicated window. So when you're doing a preview, you have come back to this tab and it captures all your interactions with the website, so you can see um what's happening so um for us link. Click is really the most important uh item, especially when we're looking at ctas. We want to make sure that this on-page cta event is firing, and so you can see here, um you know the event category cta.

B

The action is defined by a lookup table and then the label is the page url. The page of this is happening on, and so, as you scroll down, you can see what rules um cause this uh triggered this event to fire, and so you can see you know um the one that did this is that it's a cta click that contains uh cta dash button btn.

B

So as long as you have a element that contains cta button, it will fire a event for a cta event that we then track and see how often people are entering the website.

B

Excuse me not entering interacting with that element on the website and helps us kind of you know, be able to um measure conversion rate, those kind of things uh that were you know for the actions that we're encouraging people to take, and so you can see here same thing when we go to the link click, this is going to be the demo, um and so you can actually, if you're here, you can also take a look at the variables.

B

So if you want to know you know what items specifically we clicked on in this, so you can see the click class listed here. We do the same thing here.

B

And so now this new link click.

B

Same thing, on-page cta's firing for the nav trial when we click on that, let me clean these up and then this is one of the items that I noticed uh when I was doing the qa hobby is when you click on download the ebook.

B

It does not uh fire any kind of event on that or it didn't it may now. Yeah.

A

B

Yeah so um and then you can see the variables here and so for this, it's just it's not picking up the click class, because it's not a um it probably doesn't have any css on it other than it's a link. So we can also look here for other ways that we can cause that click to track as an event. If we need to.

B

A

Then I just had like a quick overall question: does this? Does this mean that this is something that you all had to set up like yourselves, to be able to track all these different things.

B

Yeah yeah um so to give you some history, so I joined the company in uh summer of 2018, and so we had google tag manager then, um and it was kind of um it was very um fragmented. So we had you know some we would set up.

B

You know all the things we needed on certain pages um and then you know we want to know you know specific ctas and it kind of became a challenge to keep that fragmentation updated and the events flowing, um and so almost two years ago now in 2019 I went in and rewrote the um the the tag manager container so that it was a little bit more uh organized and um robust and then simultaneously we had a web developer at the time who came in and helped like clean up all the ctas that had the correct classes so that we could have you know um one event: that's firing those cta clicks across the site.

B

Instead of having multiple, you know, different versions just for different. You know elements we we, you know we have like. Oh we're testing the purple button. Well, this is different than the orange button, and so you know uh now we have to write a new rule so that, like that kind of stuff, was happening, but we got past all that and and now have this kind of uniform process for uh creating those events.

A

Okay, so it sounds like like an infrastructure thing that kind of happened where it was just before it was. You had the technology, but it wasn't being used in. You know a cohesive way.

B

Yeah yeah we had the technology uh in the the use. The use case was a lot. um It was very iterative and very um like mvc. You know, um but we needed to step back so that as we scaled that that process was viable um going forward. So that's kind of you know when I joined is when we made that change.

A

No, that makes that makes total sense, uh but thanks for sharing that yeah.

B

A

B

um And then so as we go down, you know I'm just looking at anything else that jumps out as a cta. You know, so I just want to make sure that it's firing. You know whenever um firing an event when we click on these. You know I had a question about these because they're not really a cta, but you know. Maybe um you know we want to know when people are clicking on those. So we go back here.

B

We can just see, let's close these yeah, you can, let's see yeah, so the sales um click definitely triggered the um cta event. Let's make sure.

A

B

Hold on: let's try that again, because I'm not seeing it there.

B

Oh no something's happened where this connection is not working. So let's close, this stop debugging and then.

B

And then we want to.

B

Load, this again.

A

So is that, like a like a, is it an extension to your browser that you're using.

B

No, no, it's built into google tag manager. So when you go into google tag manager, you can go to preview and then that's what launches this window and then once this window launches, we can also go back into this window and share this preview out. So that's the link. I sent you on uh friday. I believe when we were talking about this.

A

Yeah: okay, perfect.

B

And then, let's see so we clicked on contact sales. So now we would expect now we click here. Yes, so and then variables yep, that's what we want to see. We want to see that it's going to the sales url, which is what we expect now. Let's click on this.

B

A

B

This link click, yeah, no tags are firing on that which is not I'm pretty sure, that's how it's set up now. I don't think we we have any ctas associated with uh customer case studies.

B

um Let's see see what's new, I think that might since it's a button should yep count as a cta and then yeah contact sales, same thing. That should do the same thing.

A

And then, and then you also mentioned that there's that that spreadsheet, that you sent to me, that has like a list of all of the different tags, correct yep,.

B

Yep, I can pull that up now. If you want to talk about it.

A

Yeah, um like those classes, then they're not css classes,.

B

um So yeah that that would be in the triggers and then it's in the json here um so you would have to kind of. I don't have a way to display this in sheets. I mean there might be something that could do it, um but if you like, you know, you can see, type here is link click and then, let's see, if we expand this out, we can probably find that there.

A

So there's an extension for it, like a google stretchy extension for like pretty anyway.

B

Yeah well so yeah. We can definitely take a look at that. I'm not opposed to it. um This is actually run with an add-on. This uh gm gtm tools by simo ahava, and you just you know um you build the documentation and it pulls in what's in your container and it outputs it into the sheet.

A

Oh, that's awesome.

B

Yep um so yeah, so this one looks like it's click text is what it's looking for. um Oh no, I don't want to make any.

B

Changes so yeah, so you were just like there.

B

To you know find css classes things like that, but really I mean uh when it comes to buttons. Cta dash button is, is the one that it looks for as a listener. So as long as you include that, somewhere in the class, it's going to be fine.

A

Okay, um okay, I just uh so then I just had like a like a uh like a broader timeline question and so like over the next like three or four months. um I think we're, like my team, is going to be rethinking a lot of the css and trying to figure out like what are we going to do with that moving forward?

A

Just because, like I think, like you're, what you've shared about, like your google tag manager is kind of where we're at from the front end perspective of the marketing site, where it's like we're going through a lot of that change, where it's like. We've done a lot of minimum viable change type stuff. But we have decided to take like a step back and to see like what type of architecture are we going to take, and so, if a lot of that stuff changes, how would that affect tag manager?

A

Assuming that, like, let's just say like, um like you know a year two years down, the line like all of the class names are completely different and like how would that affect the the setup that you all have.

B

Yeah, so it would just really depend on you know like how the differences are played out. You know- um and I think, as long as the differences are communicated, and we we have enough timeline to you- know, build in changes to the container. It's not a big problem, um I think. From our perspective. You know we just want to make sure that you know any items that we are reporting on, have a uniform structure so that we can create triggers that work universally.

B

You know, like that's a big thing for us, for for google tag manager at this point.

A

I'd like lenses, I think, there's like a hair or something I was just like trying to figure. um I was like. Why does that happen?

A

Because I was talking to you? um Okay, no, that, yes, um I think if I have like any other question, those are like my big ones, uh just like that. Walkthrough was very helpful. uh I'm just trying to understand, like kind of like what supporting roles uh I have outside that aren't visible to like what I do day to day. It was like very helpful as well, so I appreciate it. Thank you so much.

B

Yeah, if there's anything else, I can do. Let me know.

A

Yeah, thank you.