Custom Events: Web Tracking

After you've set up a Custom Event, you can also create a code snippet to start tracking the Event in your website!

Have in mind that, once you create a Custom Event, the Event will have a unique version ID. If you later edit a Custom Event, it will gain a new version and you will have the option to select which version of the Event you wish to use in your APSIS One activities. Read more about Event Versions...


In this article


Enable Web Tracking

It's important that you create web snippets for Custom Events only after they've been completely set up.

The option for new Custom Events will only be available once you click Save. To enable web tracking for existing Custom Events, start by editing the Event.

Click Enable Web Tracking.

A web snippet will be generated for your Custom Event and shown below. Click Copy Web Snippet to quickly get it in your clipboard.

To disable, simply click Disable Web Tracking.

About Custom Events & Web Tracking

It's best that you create a web snippet only when you're done setting up your Custom Event. The button is only available once you've set up and saved the Event.

If you make (and save) any changes to the Event after generating the snippet, the snippet will no longer work and you'll have to create a new one. The snippet for the old Custom Event will only work for one (1) hour after the changes are made.

To create a new snippet for your Event, simply click Disable Web Tracking and then Enable Web Tracking again.

Have in mind that, once you create a Custom Event, the Event will have a unique version ID. If you later edit a Custom Event, it will gain a new version and you will have the option to select which version of the Event you wish to use in your APSIS One activities. Read more about Event Versions...


Form Example

Let's say we want to post the Event to Profiles when they sign up to a form in your website.

The Custom Event we created looks like this:

Snippet Sample

This would be the code snippet provided by APSIS One:

<script type='text/javascript'>
window.ely = window.ely || []; window.ely.push(['Trigger.transaction.custom-form-submit-o15yqvk25j', { "source": "string",
"comment": "string",
"email": "string",
"name": "string",
"phone": "integer"
}]);
</script>

Form Sample

We want to post the Event to Profiles when they click Submit in our form. Here's our sample form:

And the code for our sample form:

<form action="/contacts/index/post/" id="contactForm" method="post">         <div class="fieldset">
<h2 class="legend">Contact Information</h2>
<ul class="form-list">
<li class="fields">
<div class="field">
<label for="name" class="required"><em>*</em>Name</label>
<div class="input-box">
<input name="name" id="name" title="Name" value="" class="input-text required-entry" type="text">
</div>
</div>
<div class="field">
<label for="email" class="required"><em>* </em>Email</label>
<div class="input-box">
<input name="email" id="email" title="Email" value="" class="input-text required-entry validate-email" type="text">
</div>
</div>
</li>
<li>
<label for="telephone">Telephone</label>
<div class="input-box">
<input name="telephone" id="telephone" title="Telephone" value="" class="input-text" type="text">
</div>
</li>
<li class="wide">
<label for="comment" class="required"><em>*</em>Comment</label>
<div class="input-box">
<textarea name="comment" id="comment" title="Comment" class="required-entry input-text" cols="5" rows="3"></textarea>
</div>
</li>
</ul>
</div>
<div class="buttons-set">
<p class="required">* Required Fields</p>
<input type="text" name="hideit" id="hideit" value="" style="display:none !important;">
<button type="submit" title="Submit" class="button"><span><span>Submit</span></span></button>
</div>
</form>

Code Sample

So, to get the values from the form into the Custom Event, we'll use the code shown below.

Here, we get the values for each input field in the form. It's important that each value is passed as a correct type, according to the Custom Event's setup. Additionally, this will allow APSIS One to convert the telephone number into an integer.

This code may change depending on the JS framework and HTML code on your website.

document.querySelector('.button').addEventListener('click',function(){
 window.ely = window.ely || [];
 window.ely.push(['Trigger.transaction.custom-form-submit-o15yqvk25j', {
   "source": "Contact Form",
   "name": document.querySelector("[name='name']").getValue(),
   "email": document.querySelector("[name='email']").getValue(),
   "phone": parseInt(document.querySelector("[name='telephone']").getValue()),
   "comment": document.querySelector('#comment').getValue()
 }]);
});

JavaScript Example

Let's say we want to create a Custom Event for an alternative Page View Event.

We'd set up the Custom Event as shown below:

Snippet Sample

This would be the code snippet provided by APSIS One:

<script type='text/javascript'> 
window.ely = window.ely || [];
window.ely.push([ 'Trigger.transaction.custom-page-view-8qad6qvu3f', {"source": "string",
"isLogged": "boolean",
"url": "string",
"title": "string"
},]);
</script>

Code Sample

Our Custom Event will post to Profiles whenever they visit a specific page. To achieve that, we'll add the following piece of code on each specific page we want to associate with the Event:

<script type='text/javascript'> 
window.ely = window.ely || [];
window.ely.push([ 'Trigger.transaction.custom-page-view-8qad6qvu3f', { "source": "Website",
"isLogged": !!document.querySelector('[name="customer-id"]'), "url": document.location.href,
"title": document.title
},]);
</script>

The following line of code gets information from the page about whether the visitor is logged in, and converts it into a boolean (true/false) value. If the visitor is logged in the value will be true, and vice versa.

Please bear in mind that these are strictly examples, and you will have to use code that fits your website.

!!document.querySelector('[name="customer-id"]')
Did this answer your question?