Event tracking allows you to track actions that visitors take on your site, such as button clicks, form submissions, newsletter sign-ups, and any other action that makes sense for your website.
Setting up event tracking is very easy. All you have to do is follow these two steps:
- Create a custom event goal through the dashboard.
- Add a piece of JavaScript code to your website.
1. Create a Custom Event Goal
The first step is creating a goal, so LookAnalyze knows what to track. Follow these steps:
- Click Goals from the left menu.
- Click Create.
- From the dropdown menu, select “Custom Event”
- Enter a friendly name for your goal (this is what you’ll see in reports)
- You can optionally change the KEY to your desired value or leave it as it is.
- Copy the Javascript code (you’ll need it later) and click the CREATE button.
Your screen should look like this:
2. Add Javascript Code
The next step is to add the Javascript code you copied above to your website to inform LookAnalyze that an event has occurred.
Here are some common use cases:
Track Link Clicks
There are two ways to track clicks to a specific link. The first is to add an onclick event to the ahref tag, like this:
<a href="/download" onclick="lookanalyze_track.goal('download-pdf');">Download PDF</a>
The second way is to use Javascript to target any/all elements on a page with a specific ID or CLASS. In this method, ensure the javascript code for your events appears after any/all IDs or CLASSES.
Let’s say you want to track an event when a customer clicks a link that looks like this:
<a id="download-link" href="/download">Download</a>
You’d add the following script to your HTML (typically just above the element) to do this.
<script>
window.addEventListener('load', (event) => {
document.getElementById('download-link').addEventListener('click', () => {
lookanalyze_track.goal('download-pdf');
});
});
</script>
Track External Links
If you want to track clicks on links that point to an external domain, you could do something like this:
<a href="https://amazon.com/x" onclick="lookanalyze_track.goal('amazon-link');" class="ext-link">Link to Amazon</a>
Track Page Load Conversions
If you want to track page loads of specific pages and you don’t want to use the “PageView” goal, you can fire an event when a page loads:
<script>
window.addEventListener('load', (event) => {
lookanalyze_track.goal('checkout-completed');
});
</script>
Track Form Submissions
To track form submissions, you can use the onsubmit event link like this:
<form method="post" onsubmit="lookanalyze_track.goal('contact-form-submit');">
If you cannot edit the form code to add an onsubmit, but the form has an ID (or you can give the form an ID), you can add the following script after/below the form:
<script>
window.addEventListener('load', (event) => {
document.getElementById('form-id').addEventListener('submit', () => {
lookanalyze_track.goal('form-submitted');
});
});
</script>
That’s it! If you have any questions or problems, our support team is here to help.