Creating Custom Events in Binom v2
I have been pretty quiet with affiliate marketing over Christmas and the New Year, in fact, I picked some kind of bug on New Year's Eve, and I am only just about getting over it now!
To kick start my 2024 journey, I thought I’d put together a quick guide on how to create some custom events in Binom, mostly because I was actually going to do it anyway
I usually create four custom events in my tracker, which I trigger via my landers using JavaScript, these are:
- Push Allow %
- Push Deny %
- Back Button %
- 2 Sec
I think it’s fairly obvious what they are, but just to clarify, here’s a quick description of each.
- Push Allow % - This is triggered when a visitor clicks the allow push on the page.
- Push Allow % - This is triggered when a visitor clicks the deny push on the page.
- Back Button - This is triggered when a visitor clicks, you got it back in the browser!
- 2 Sec – This is triggered once a visitor has spent more than 2 seconds on the page
With Binom v2, you now have access to 30 custom events, which is a 200% increase in the number of custom events from Binom v1, which is a lot more events to play with.
Right let’s get started.
There are 2 parts to adding custom events, firstly, creating them in the tracker, then secondly, you’ll need to add a trigger to your landing page to send the event to the tracker.
Creating Custom Events in Binom v2
To create custom events in Binom, you need to add a custom column. You will need to go to settings on the top right.
Then click on Columns left menu and scroll down to the bottom of the page, where you will find the Add custom column button.
Click the green Add custom column button to bring up the Create column page.
This is where we enter the setting for our custom column. You need to give your custom column a name, but you will also need to use an event number, as I mentioned above, Binom v2 now has 30 custom events you can use, which should be more than enough for most people.
Here, I’m using events 2 to 5, so
- Push Allow % -> event_2
- Push Deny % -> event_3
- Back Button % -> event_4
- 2 Sec -> event_5
It’s a good idea to plan these out in advance so you know what's what when you get to creating the columns, but not essential.
The formula I use is event_x divided by clicks times 100, so for Push Allow, this would look like this:
Code:
(event_2/clicks)*100
Next, you will need to set the Decimals and Format, which should be 2 and 99%, like this:
Then, lastly, you need to set where the columns are shown. I tend to keep them to Campaigns, Report, Landings and Offers, but you can choose All if you want.
Once you have entered everything, it should look like this:
Take a moment to review everything that looks right, then click save, you need to repeat this for each of the custom events you need. You will see your custom events in the list, they should have a blue bar at the beginning.
The C, S, L, and O relate to where you set the columns to appear, so if you choose All, then you will just see ALL, you can also see at a glance the formula you used and edit them if required.
Now you have your custom columns set up you can see them in the sections you set
Adding click ID to landing pages
In order for the tracker to know which click to assign the event to, you will need to pass the click id with the event. To do this, we will need to add the Click ID token to your landing pages so it will be part of the URL, which we can then grab using JavaScript.
Open or create a landing page, enter all the details, then simply click the Click ID button, this will add ?clickid={clickid} to the end of the URL.
Before
After
Now, the tracker will pass the click ID as a parameter in the URL.
Triggering Custom Events
You will need a couple of functions to grab the parameters from the URL and send the event back to the tracker. I’ll show you the most basic way, but you can tidy this up using variables etc, if you wish.
So, in your js file or at the bottom of your lander, you will need to add some js code to trigger these events whichever way you like to work. Very basically, it's just a call to your tracker with some parameters, e.g.
https://{TRACKER_DOMAIN}/click?&event{EVENT_NUMBER}=1&upd_clickid={CLICK_ID}
Getting URL parametersTo get the parameters from the URL, you need a very simple function, which you may already have, if not, you will need to add it to your js file/script section.
function getURLParameter(name) {
return decodeURIComponent(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, null])[1] ||
''
)
}
Then to get the clickid we’d call that function with clickid parameter like this:
getURLParameter('clickid')
Which would return the click id from the URL, we need to add that to another function we need to send the event to the tracker. I use functions as I need to use the same code repeatedly, so rather than having to keep repeating it, just create a function and call that.
function sendEvent(eventNumber) {
var clickid = getURLParameter('clickid')
var o = document.createElement('img')
o.src = `https://{TRACKER_DOMAIN}/click?&event${eventNumber}=1&upd_clickid=${clickid}`
}
Remember you will need to change {TRACKER_DOMAIN} with your actual tracker domain, no brackets!
To use that, we simply call it and pass an event number and the click ID, so to trigger a push allow we would call the function like so:
sendEvent(2)
Right now, we have all that sorted time to add the triggers, I use ProPush mostly, and they handily provide you with the relevant code to add which we can just add the function calls to. Now you will need to add this code into a page load event, but that isn’t that hard, just wrap it in a DOMContentLoaded section, e.g.
document.addEventListener('DOMContentLoaded', () => {
// ProPush code
var s = document.createElement('script')
s.src =
'//{ADD_YOU_PP_INFO}/pfe/current/micro.tag.min.js?z={ADD_YOU_PP_INFO}' +
'&sw=/sw-check-permissions-{ADD_YOU_PP_INFO}.js'
s.onload = function (result) {
switch (result) {
case 'onPermissionDefault':
break
case 'onPermissionAllowed':
sendEvent(2)
break
case 'onPermissionDenied':
sendEvent(3)
break
case 'onAlreadySubscribed':
break
case 'onNotificationUnsupported':
break
}
}
document.head.appendChild(s)
})
You need to get the correct code from ProPush, which will have all the relevant code, etc., in it. SO there you have it custom events configured and some simple JavaScript to trigger them.
You can, of course, use the custom events for anything, I've just shown you how I use it to capture a few things from my landing pages.
Hope you found this useful, please do let me know if you try it out or indeed, if you use custom events for other things, always interesting to see how people manage their flows.