Custom Events: Web Tracking
After you have created a Custom Event choose between using a Web Snippet or our Custom Events Editor to implement the event and connection to your website.
For a guide on how to create a Custom Event and fields head to this guide: How to create a Custom Event.
In this Article
Enable Web Tracking
Web Snippet
Only create web snippets for Custom Events after they have been completely set up.
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 marketing activities. Read more about Event Versions.
Note: 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.
1. Set up the Custom Event and click Save. The option for new Custom Events will only be available once you click Save.
2. To enable web tracking for existing Custom Events, start by editing the Event.
3. Toggle Enable Web Tracking.
4. A web snippet will be generated for the Custom Event and shown below. Click Copy Web Snippet to quickly get it in your clipboard.
Install the Web Snippet on your website.
To disable, simply click Disable Web Tracking.
💡Tip: To create a new snippet for your Event, simply click Disable Web Tracking and then Enable Web Tracking again.
Custom Events Editor
With the Editor you can set up custom tracking on your website, tracking certain buttons and behaviors without the assistance of a developer.
How to set up a Custom Event with the Editor
Imagine you want to register an event every time someone clicks "Book Demo" on your website.
1. Set up the Custom Event and click Save. The option to enable Web Tracking for new Custom Events will only be available once you click save.
For a guide on how to setup a Custom Event and fields head to this guide: How to create a Custom Event.
To enable web tracking for existing Custom Events, start by editing the Event.
Give your Custom Event a name that reflects the action it will track. Add up to 20 fields of Events data. In this example we will only add one additional field to see clearly which product the demo is booked for.
2. Toggle enable Web Tracking.
3. Once you enable the Web Tracking you see the script that you can install on your site - Leave it be and instead use the Custom Event Editor by filling in the fileds under Connect Website to Event.
4. Give your Activity a name, choose the domain you are tracking on and then paste in the exact page you want to track on.
5. Click Connect and you will be directed to the page and you will see the Custom Event Editor appear to the right.
6. Set up the Trigger. Decide when the event should be triggered. Choose between when the page loads or when the element is clicked.
In this example we are using Element Clicked since we want the Event to be triggered whenever someone clicks the Book a Demo button.
💡Tip: You can also use the CSS selector by opening the Advanced Options.
7. Click Save and choose the element on the site by clicking on it.
8. Now see how the Trigger is populated with the values.
9 If you have more fields simply click on the field and click on the corresponding spot on the site to map the data you want to track.
In this example we will map the "product" so we ca differ this kind of request from other products.
9. Click Activate in the bottom bar when the fields are mapped.
Now you can see the Custom Events is connected to the website.
10. Test that data is coming through to Profiles by going to your website and trigger the Custom Event. Then look up the Profile ID/Cookie ID (a Profile that has accepted cookies) in Audience and go to the Custom Events tab.
11. Click one the Event Icon to open the event and check the Event data is correctly picked up.
All the data you collect from a Custom event can be use to create segments or trigger Marketing Automation Flows. Jump in!
Advanced: Allowed Operations
This setting only applies to operations performed by Efficy Marketing/APSIS One's API and Integrations. It is intended to give you control over which identifiers can be used to read or write Profile data by external systems.
For example, you can adjust these settings to keep third party systems from reading sensitive Profile data by disabling the read permission for the email identifier linked to your third party system.
Example with Form
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:
<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 the 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
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 the system 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:
<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"]')
What's Next?