Website event tracking is a powerful method to track any action on a website other than a pageview. Events are user interactions with content that can be measured independently from a web page or a screen load. Examples are pdf downloads, link clicks, interactions with polls or calculators, video plays and even AJAX embedded elements.

Website event tracking helps to get a better insight into the digital body language of your lead or customer. A pageview is nice but knowing that the person also read to the bottom of the page is even more valuable information. Think about tracking which part of your product video is watched, links clicked to pdf downloads or the interaction with forms or interactive tools on your website.

What about having all these insights in Act-On? This is possible with some small changes to your website.

How it works

The basis is the Act-On Beacon script. This script registers the pageviews in Act-On.

Using javascript you send an event that you want to track to the Act-On Beacon script. The Act-On Beacon script records the event as a page view and it will appear in the timeline of the contact and the website prospector report.

You can do anything with it in Act-On: Use it for lead scoring, create segments, use it as a criteria in automated programs or for dynamic content in emails.

How to implement (example)

Below is an example code to show you how it works. It will send an event to the Act-On Beacon when you click a link, mouse over it or away from it.

  • Make sure that the webpage has the Act-On Beacon script on it.
  • Place the below code in the head section of your webpage. This script receives event calls from the page and sends them to the Act-On Beacon script.
<script type="text/javascript">
function TrackEvent(event) {
ActOn.Beacon.track(event,'page',new Date().getTime());
}
</script>
  • Place the below code in the body section of your webpage.
<a href=";return false;" Onclick="TrackEvent('Link/gotogoogle/Clicked');return false;" Onmouseover="TrackEvent('Link/gotogoogle/Mouseover');return false;" Onmouseout="TrackEvent('Link/gotogoogle/Mouseout');return false;"target="_blank">Go to Google</a>
  • Save and go to the page. Click the link and move the mouse away from the link.
  • Go to the website prospector in Act-On and you will see below page results (you might have to wait a few seconds and click the Update button).
website event-tracking-in-act-on-website-prospector
In Website Prospector
  • Go to your contact report in Act-On and check the time line. You will see below results.
website-event-tracking-in-act-on-contact-report
In Timeline

How to use it

The above example includes the events of:

  • the user clicking a button (OnClick),
  • moving the mouse pointer over the link (OnMouseover)
  • and moving the mouse pointer away from the link (OnMouseout).

You can assign the event to an HTML element for example a button, link or a form field. A complete list of possible HTML events can be found on 3schools.com/jsref/dom_obj_event.asp.

Examples of website event tracking

PDF library tracking

You want to track engagement with pdf documents that for technical reasons cannot be stored in Act-On. By implementing event tracking on the download button of every pdf document all downloads will be registered in Act-On.

Video tracking

You want to track engagement with videos from YouTube or Vimeo: Who started and watched the videos to the end. Learn how to implement video tracking in Act-On.

Online calculator

You have an interactive tool on your website to calculate ROI. You can track the interaction with the tool but also the outcomes and entered values.

Page scrolling

You want to track engagement with certain webpages. You can do this with scroll tracking. The below script sends an event to the Act-On Beacon script when a user scrolled more than 50% and 90% of the webpage.

<script>
document.addEventListener('scroll', function(){

var h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';

var percent = parseInt ( (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100);

console.log(percent + "%");
if (percent == 50)
{
ActOn.Beacon.track('Scrolled more than 50%','page',new Date().getTime());
}
else if (percent == 90)
{
ActOn.Beacon.track('Scrolled more than 90%','page',new Date().getTime());
}

});

</script>

Show me your examples!

Mail me if you have other great examples of using the event tracking with Act-On, I will place them here so everybody can use it for inspiration.

Like this post?

If you like this post then also check the other Act-On hacks about video tracking and source tracking in Act-On. If you have any question or remarks you can post them below. I will try to answer them as good as possible.