This video shows you how to use Experience Platform Launch to track conversion events (AKA success events) on your site. It shows this in the use case of tracking an application process on a sample site.
Hey, this is Doug. This video has kind of a dual purpose. So one purpose is to show you how to create rules for success events or conversion events. The things that you’re trying to get them to do on your site and the other purpose is to show you how to track a process. So this might be an application that has several steps, or something like that. So, dive right in. In this example, we’re going to use the start and completion of a credit card application on our site and you’ll see right here that we’re going to show both a page load rule for the start of it and another rule type for the completion of the application. So you might have either of these things, so I’m going to show you a couple of things and you’ll have to see, what does your site need? What makes most sense on your site? So if we go back to our site, then we can see here that we have, down the bottom here, a link to the Geometrix Charge Card application, apply today. And we can click there, or we can also go to the company and Geo Charge Card, either one of those. This brings us to the first page of this short application process and you’ll see that it has this first page where you choose the card type and you give some information and then you continue.
You have some more information in here and then you proceed to apply. Now this link takes us to a different site. It takes us to a third party site and so we can’t count on having our code on somebody else’s site, so we’re going to have to track this link and so that’s a little hint on what we’re going to do. But let’s back up a little bit. If I just hit back a couple of times and we see we’re on the homepage there. So we need to go to launch and we’re going to go into the rules and create these rules.
So as I mentioned, if I go back to the SDR, the first one is going to be on a page load rule because, I’m going to be jumping back and forth here a lot, on our site, we can see that if we land on that page, it is really just landing on this page that should trigger the start of the application. We could track the click of the button we just clicked on on the homepage but if we track a click and that click leads us to a page that loads and then we track that page as well, well then you’re going to pay Adobe twice. Once for the click, server call and once for the page load server call. So, if you are going to a page where you can tell that that thing happened, then it’s always good to do it on a page load. So here we are, on a page load and when this page comes up, we know that it’s the beginning of a process. So we’re just going to look for this page and when it is this page, then we are going to set the beginning of that process and we’re going to set a conversion event. So we can actually go to the data layer and we can see that the page name is, “Charge Card Application Page 1”. So I’m going to leave this open, we’ll go back to launch, we’re going to create a rule and this is going to be, credit card app start.
Now when are we going to run this? Well, this is just a page load, so we are going to do like we’ve done before and click event and look for the event type DOM ready and we’re going to run this on 50. Once again, so that we don’t have to send a beacon but so that we can piggyback off the beacon that’s going to already happen. So, keep changes, we’ll set our condition.
Condition type, value comparison and when the page name…
Equals and we’ll go get that.
Charge card application page one…
Paste it in. So in the page name equals this page name…
Then we will set it.
Okay, we can just go down…
Choose analytics, we’re going to set variables and if we look back at our SDR, we’re going to set event3.
So we’re just going to set event3…
And that’s all we really need to do. Now, we don’t have it really coded in to this site. I will admit, this little demo site but when you continue on this page, you should probably, if you were looking at this, best practice would be to say, which card are you applying for? And so in this case, we would want to put which card into an eVar, so we might not be able to tell that on this process, so at that point maybe we do send it a beacon when we hit continue, or we set that on the next page but in the real world here you would definitely set which card into an eVar, it would go back and choose an eVar to set it into, like eVar4 and then you would set that into an eVar and you would set the fact that you started the process into the event, like we’re doing. So, in our case since we don’t really have that coded in there, we’re just going to set the event for now and so that’s all I’m going to set, keep the changes and that’s all we have to do. So we save that to the library and build. Okay, that’s done and now we can go back to our site, we can go to the homepage for example and we can bring up our debugger and clear all those requests, make sure it works by going to the beginning page. Well, we could even reload this page to get our kind of baseline homepage there. Everything’s working great, we click on this and on that hit, we not only get our event1 for the page view but we get event3, which means that we’ve started the process. Great, so our next step is actually to code in the completion of the process. Now as I mentioned, the completion of this process as we go to the next page and then, it’s when we actually click on this button here. I’m going to make this big again here, so we can see it. Well that goes to another site so we can’t put our code on the resultant page so we do have to track the click of this button. So, I’m going to right-click on it and inspect, so that we can see what we need to grab onto and we can see here that it is a link and class equals button2 and so be able to grab on that and really there’s so many ways you can determine that something has happened there, so there’s lots of different tools in launch for you to trigger this server call. So we’re going to go back to launch and we’re going to add a rule and we’ll call it CC App Complete and our event is not a page load this time. Our event is actually a click on that button. So we go to our event type and we scroll down a little bit until we can see a click. There it is, a click, right there. And then I’m not going to go through all the options here, you can look at the documentation and see what all these different options do but I’m going to go with specific element and elements matching the CSS selector. Again, if I go back to my site and we look at that and you can see as I mouse over that up in this area it’ll say, a.button2 'cause this is that link. The class is button2, so I can just go in and say, a.button2.
Now of course if you had a bunch of 'em with that class on then you would trigger this on all of those, so you have to be very careful on how you trigger this rule because you don’t want it to trigger too often and you don’t want it to trigger not often enough. So you want to be very specific about how you use your CSS to grab this and in my case I know that this is the only button on the site that is called, “button2”. So I can use this one but again, it’s going to be completely different for you. I’m just showing you how to do this, based on some CSS. So your CSS, of course, will be different. And I’m going to leave that and so I’m going to now keep the changes, so we don’t need conditions but we’re going to go down to actions and we need to set that event, so we’re going to go into analytics and we’re going to set a variable and we decided going back that this is event4 the completion, so I’m going to go down to events and choose event4 and that’s all we need to do. Again, if there was something at the end of the process that we needed to set into an eVar like again, which application or which card or which something else, then we could do that here as well. But that’s all we need for now, to see event4. And then we need to send this in. So this is not going to be on a page view but it’s on a click, so since it’s on a click we need to add a beacon. So we’re going to send a beacon this time.
But instead of doing a page load we’re going to send what we call an s.tl which is often referred to as a custom link or a track link and we’ll leave this on a custom link because you can see you can do other ones which are download and exit link. You’ll see that we will actually have an automatic exit link fire. But in this case, we want a custom link to fire that event and we can even just call this, CC App Complete. That’ll actually go into a custom link report as well. So now we can keep that change and that’s all we need to do for that rule, so we’ll save that to library and build. Okay, let’s go check it out. But you’re going to see that there’s going to be one more issue, so let me go over here and we’ll put it on the left hand side and we’ll see that. So let’s clear all requests and you’ll see what happens when we do that. So, I’m going to go back to the beginning here and there’s are home page and then we click on this and we go, all right, start of the process, event3 and we continue to the next page of course, that’s just a regular page if you have that one. And then we click on this button.
You’ll see that we get a couple of things and so we get, if we look here under this link type, we now get link_o, which is an other link which also is a custom link. So this is a custom link, it is not a page view, will not record a page view, it’s a custom link and it also, as I mentioned, fires an exit link because we were going to a different domain and so it says, oh you’re going off the site, let me tell you where you’re going and it has that right here. But it is going to do that automatic exit link but we’re mostly interested here in this custom link. Now if we look down at our events, we’re really excited because event4 happened but wait a minute, event1 happened as well and that is our page view event which in fact we don’t want to fire because it was not another page view. So why did that fire? Well it is hanging on, actually, from the event back here. So when we are working with these custom events, we need to clear the variables as well so that they don’t hang on from the page views and then go in with that custom link. So if we jump back one more time to Launch and we go into our credit card app complete rule, and we go down and we add, this time in analytics Clear Variables, okay that’s set and we will keep that change but we don’t want it at the end, we want it at the beginning. So we can actually take that and grab it and move it right up there. So clear the variables and then set it and run it. All right, so save that. Okay, it’s done, let’s take a look. Go back to the homepage, clear the request and okay, so we got it, we got our homepage, event1, great, restart the process, we have event3 for the start of the process, awesome. Continue, just another regular page view, event1 and then when we click on this, once again we get our link_o, our custom link hit but this time, we only get event4, which is what we want and we’ll have that event4 also on that exit link. So in that case, to get rid of that, we can also put a clear variables at the end of it and then that will also not happen again. So be careful with your custom links and test it out to make sure there aren’t values hanging on from before or hanging on to after as you work with these s.tls, or with these custom links and that’s anyway how you can measure beginning and end of a process and we did one with a page load rule and we did one with a custom link. Good luck.