Custom Link Tracking without a Tag Manager

Hey everybody, this is Doug. In this video I wanna show you how to do custom link tracking on your site, if you are not using a tag manager like Adobe Launch. So, you just need to do it in the code and I wanna show you how to do that in this video. So first of all, really, even if you are using Launch, it’s all gonna be about this function called s.tl, which is short for track link. This is the function that you’ll want to call and again, we’re gonna talk about non tag managers in this video. So I have coded a couple of links into a page over here, little test page. So I have a link here that is pretending that we’re gonna share something on Facebook, and then just another random link and I’ll show you basically what those look like here in a second. But the main thing is that we’re gonna set some variables and then we are going to call this s.tl function for track link. Now I might also just take a moment and say, if you are tracking links on your site, please make sure that you have thought this through and that you are not basing the success of your site on link clicks. We can definitely track the clicks on links, but we really want to see how that leads to other success on our site. Not just basing the success of our site on people click click click click clicking around. Okay, so anyway, get off my soapbox for a minute there. Next, we can look at the format of this s.tl function that you’re gonna send in, so you can see it here. We’re gonna send in a this, and we’re gonna send in a link type and a link name. And then we got a couple of 'em over here that we’re not gonna talk about today 'cause they are not used very often and they are optional. But we definitely are gonna use these first three right here. You can see that the link type value, that’s the one right here in the middle, is gonna be either a d for downloads, an e for exit links, or an o for custom links. And the this moniker will stay as is, and then we will put in a link name. And there are a couple other things that we’re gonna need to do, in order to make this work, in fact, let me click over to this other documentation page, and you’ll see that we’re gonna have to set something called linkTrackVars, and linkTrackEvents. And so, you can go through the documentation here and I recommend that you do. Some really good information here, documentation on s.tl, and these link tracking hits that you’re sending in. So I do recommend that you go through all this documentation but I did want to just quickly show you how it works. And let me go ahead and switch over to a text editor. We have some links here, you can see there’s some text up there, anyway, here are the links. So we have this one link that says, click here to share on Facebook, and another one that is just another link, and I’ll get to that one in a minute and why I’ve done it this way. Basically though, here is how you’re gonna set this up. You are gonna set it up by setting linkTrackVars, potentially linkTrackEvents, and then setting some variables and then calling s.tl. Now you don’t have to set any variables, but let me just say, if you are going to set any additional variables, which you probably are in a lot of cases, then you need to jump through a couple of hoops here. These are our linkTrackVars and linkTrackEvents hoops. So, basically you need to tell us, what you’re gonna set, with these two, and then you can set them right here, okay? So if you’re going to set any variables with a custom link, with s.tl, you have to tell s.linkTrackVars, which variables you are going to set. So you can see that it is, events, now, you don’t put the object name, s, so you’re gonna put events, eVar2, and prop2.

We’re gonna set those three, events, eVar2, prop2. Now if you’re going to set an event, then you also need to set linkTrackEvents, and tell us which event you are going to set, right there. Okay? So again, you’re gonna say, here’s what I’m gonna set, pay attention to these ones, and then you set them, and then you send it in, okay? And that is how you are using s.tl, and I’ll get to this other part below there in a second. But that’s the main thing. Now that also means, of course, that you can do this any way you want. This can be on the on click, it can be triggered however you want, at the end of the day, you are just making sure that you fire these things, and sending them in, okay? So you can see here that I have, by the way, put them on different lines, and they’re all part of this on click right here. This also means of course that I am nesting my quotes, single quotes and double quotes, so make sure that you don’t mess that up, that’s easy to make a mistake on. And in any case, we can also, looks like we can also take s.events, and we can merge these two together, right? So I can take this, and just maybe put it right here.

Since those are gonna be the same thing, I can actually just, this is just JavaScript, you know it better than I do. So I can set s.linkTrackEvents=s.events=event2.

So that’s another thing I can do to shorten that up a little bit. Anyway, but I’m not gonna try to teach you JavaScript today, 'cause you probably know it better than I do. So, in any case, set linkTrackVars, and linkTrackEvents, and then you can set the events variable, you can set any eVars and props et cetera, that you have named in there. So again, in this case I’m going to set this value Facebook share, into eVar and prop2, and then the s.tl, which again has a this moniker right there. It is an o for a custom link, kinda means other. And then this value right here, social share, will go into the custom links report, and the custom links dimension in analytics. Now, you probably won’t use those very much and that’s probably why you’re going to use, and set, eVars and props here, so in any case, that is part of that and you will need that so I usually just put the general idea of what this link is, okay. So, anyway, that’s that, and this second one you can see here, has no eVars and no props, it’s actually just setting that custom link to another link, okay. Now, let me jump over and let’s take a look at what happens when we click on these. Here I am on my page, and I’ll actually even just, reload that, and, maybe we will filter that, so that we only see the hits, and here is the hit for the page load, and that’s fine, we’ve got a page name, and it actually set event1, and has set, prop1, and some of those things, and that’s fine, that’s not what we’re here for. But the link here, so if I click on that, you can see that it sends in another hit, and it will set those items that I set up in the code. So, if we scroll down, we can see that it has set event2, it has set prop2, which parameter is c2, and eVar2, which is v2 parameter, and its has set lnk_o, which means that it’s an other link or custom link, and then it’s set the URL in page event one, and in page event two was the name that we put into that s.tl. So that is all happening from that hit. Again we can see that we set eVar2 and prop2, we set social share right there, there’s the o, and we are good to go. Now, what I wanna show you is that after that, and you can see I have a link to a manageVars, function right here, and it’s commented out, because I wanna show you, what will happen if you don’t actually clean some of this up before you do other stuff. So, you can see this link down here doesn’t set any variables, but if I go back to my site, and I click on that link, and get that hit, scroll down, and you’ll see here that it is actually setting those variables again, prop2 and eVar2 et cetera, because it is still there on the page and it has been set and it’s there and it’s sending it in again, so, we don’t wanna do that, and so, therefore, you can do that however you wanna do it, you can clear that out, you can just set linkTrackVars to null or whatever you want. And I’m going to use a plugin, this is a plugin that is available to you if you’ll contact consulting or customer care at Adobe, and you can get the code for manageVars. I can show you in my app measurement file, that I have put that down here, and I have identified all this code, for this manageVars plugin and so. That way I can now call manageVars on my page, which I’m doing right here, and I’m just saying, clear the variables and so that’s all that’s doing, manageVars actaully lets you do some other things as well, move things to lower case, et cetera, but in any case, I’m just clearing that variable, this linkTrackVars, so however you wanna do that, clear that out. That way, when you go to your next one, it won’t have stuff just hanging on. So now that I have removed those comment lines I can save that. I’m gonna jump over here, and upload it, replace. I’m going to reload this, and now, in fact I’ll clear that out, and click on my first one. And, once again, I have the variables, prop2, eVar2, click on the next link, and this time I don’t. So that is working correctly, now I do have that and of course, another link, that’s what I had right in the code, and that’s what I wanted there, another link, et cetera, got a console log in there, that’s fine. But in any case, just wanted to show you, first of all, the code that you can apply to a custom link, how you can set some variables, and again, very important, that you clear those variables out, at the end, after you’ve sent this in, right? You don’t wanna clear 'em before you send it in or nothing will go in. So, send in the data with your s.tl, and then clear those variables. And then it’ll be ready for you as you click on your next link.

Good luck.