How to Setup ActiveCampaign Event Tracking

Understanding what pages your contacts view using ActiveCampaign’s Site Tracking is an incredibly powerful tool. Site Tracking allows you to take action when a page is viewed; like trigger a follow up sequence, or adjust a lead score to measure engagement.

The next level up from Site Tracking is Event Tracking. Event Tracking is similar to Site Tracking, but grants you the flexibility to track so much more than just a page view. You can create custom events to track virtually any online behavior — how much of a video someone viewed, how far down the page a visitor scrolled, whether they clicked a button, added an item to their shopping cart, etc.

Custom events are important, because oftentimes a page view doesn’t tell the complete story.

There’s very little that can’t be tracked if you know how to write the code. In this post I want to give some guidance on how to set up Event Tracking for specific situations. Even if this isn’t something you have the technical ability to do yourself, it will help you understand what’s possible and you could hire someone to set it up for you. Many of our Certified Consultants can help you with this.

In this article we will learn how to…

Sending ActiveCampaign Form Activity to Google Analytics

Understanding the small behavioral events leading to a purchase is a vital piece of the digital marketing and marketing automation puzzle.

By breaking larger objectives down into more manageable components, you are able to identify the areas of each funnel that are creating friction for your users, and focus on them. This practice can help you prioritize what works and what doesn’t, and remove constraints on your business growth.

For this example I will use this ecommerce store that sells NASA travel posters, and use the modal window to offer visitors a one-time only 15% off coupon. Since I am spending money on the ad traffic, I want to know how many of my visitors close the page without converting, so I know not to target similar visitors in the future.

For these examples, I downloaded a simple theme from Start Bootstrap that I will be working with, and you can grab the entire project from my GitHub repo.

To make it easy, I am just using the simple Modal form, which I created in my ActiveCampaign account. In order to deploy the form I have already installed the script snippet inside the theme.

Using JavaScript

Warning: The following is a bit technical. Dont be intimidated or gloss over it! We are here to help, and you can always ask for specific advice in our Developer forum.

In order to track our form-submit event using JavaScript, we need to listen for the onsubmit event, and when we hear it, tell Google Analytics about the event.

Our “tools” for this project are a code editor, the JavaScript onsubmit event, and Google Analytics event tracking. You will also need to make sure that you have access to edit the code on the page.

Read more about the onsubmit event.

Read more about ActiveCampaign event tracking.

All you need to do to track when the form is submitted, is to include this code anywhere the form will display. The best place to do this is probably just before the closing </body> tag.

<!-- BEGIN: Custom JavaScript -->
<script>
var activeForms = document.getElementsByClassName('_form_11');
var myForm = activeForms[0];

myForm.addEventListener("submit", () => {
  console.log('The form was submitted');
  ga('send', {
    hitType: 'event',
    eventCategory: 'Forms',
    eventAction: 'Submit',
    eventLabel: 'Modal Form'
  });
});

</script>
<!-- END: Custom JavaScript -->

Let’s break apart each line of this code and explain what it does.

<!-- BEGIN: Custom JavaScript -->
<script>
var activeForms = document.getElementsByClassName('_form_11')
var myForm = activeForms[0];

We start by defining a variable activeForms as an array of all the forms contained on the page with the class ._form_11. The easiest place to get the class name is from the CSS inspector tool on the ActiveCampaign form builder screen.

Really, there should be only one form with this classname on the page. If there are more than one, things get a bit wonky and you might not have everything setup the way you want it. Since we only want the one form, we set the variable myForm equal to the first item in the activeForms array.

myForm.addEventListener("submit", () => {
  console.log('The form was submitted');
  /* other stuff here */  
});

Next, we attach an event listener to our form, listening for the “submit” event. When that happens, we trigger our anonymous callback. I placed a simple log here so you can test the form submission before adding the Google Analytics event tracking code.

ga('send', {
  hitType: 'event',
  eventCategory: 'Forms',
  eventAction: 'Submit',
  eventLabel: 'Modal Form'
});

The last thing to do is call the Google Analytics event tracking code. This version is using the analytics.js implementation, since classic has been depreciated.

Using a Tag Manager

My favorite tag manager to use for tracking and managing events is the point and click tag manager by Big Picture. Big Picture uses a simple visual interface, and allows you to syndicate your events to hundreds of third party services like ActiveCampaign.

They have a native ActiveCampaign integration, and you can choose which events you want to send to which services. This means that we are able to choose to send only a handful of all the events we want to track to ActiveCampaign, or we can track all of them.

Tracking a form submission event with Big Picture is simple. Create a project, connect Google Analytics and install the Big Picture tracking snippet on your site. Big Picture will check to see if you already have an instance of the Google Analytics snippet installed on your site. If it does, then it will use that snippet. If it doesn’t then it will install the Google Analytics tracking snippet for you.

From then on out, its just a matter of point and click! Create a new action, choose the element you want to track, and save the action.

Customize what pages on your site you want the action to send the event to Google Analytics using the parameter and wildcard matching and you are all set. Just hit publish in the upper right, and your events should start sending to Google Analytics within a few minutes.

Sending On-Site Activity to ActiveCampaign

Visiting a blog post, and reading a blog post, or viewing a page that has a video and watching a video are two completely different things. Instead of simply measuring if a user views a page, use events to measure how well your content is being consumed, and when does the user fall-off.

In this example, we will send messages to a user trying to get them to “adopt” some content. We will spoon feed them pieces of the content over a period of 2-3 weeks. However, if the user has consumed all of the content at the source, we will jump them to the end of the automation using the goal.

In order to do so, we need to setup a page-scroll event, for when the user has scrolled down at least 50% of the page.

Using JavaScript:

In order to send an event to ActiveCampaign (and Google Analytics, because why not) when a user is 50% of the way down the page, we need to break the task up into manageable sections:

  • The first thing we need to do is figure out how many pixels is 50% of the way down.
  • We need to listen for every time the user scrolls, and when they do, check if they scrolled past our 50% mark.
  • If they haven’t scrolled past 50% ignore it, if they have, send an event to ActiveCampaign.
  • Finally, since we only want to fire the event one time per page visit, we need to prevent the event from firing again if the user scrolls back up and then back down.

First, lets figure out how many pixels is halfway down.

<script>
var halfwayHeight = document.body.scrollHeight / 2;
</script>

We do this by getting the total scroll height and dividing that by 2. We store that number in a variable called halfwayHeight, simple enough so far.

The next step, is to call a function every time the window is scrolled at all. To do that, we will add an event listener to the window element. The event listener will listen for any time the window emits the “scroll” event, and call our callback function if it detects it. To make sure it works, we will just log a note to the console.

<script>
var halfwayHeight = document.body.scrollHeight / 2;
window.addEventListener("scroll", () => {
  console.log("The window was scrolled");
})
<script>

Read more about the “onScroll” event

Now when we scroll down the page, we see our note being logged many, many times to the console.


We certainly don’t want to send that many events to ActiveCampaign, that would be crazy! We only want to send an event when the user scrolls halfway. To do this, we will check every time the user scrolls to see if they made it halfway, past our halfwayHeight.

<script>
var halfwayHeight = document.body.scrollHeight / 2;
window.addEventListener("scroll", () => {
  if (document.body.scrollTop > halfwayHeight) {
    console.log("scrolled past halfway");
  }
})
<script>

Great! We are almost there, but we are still firing way too many events. The last thing to do is to only fire the event just one time. We do this by defining a variable called hasNotScrolledHalfway and setting its value to true. Then when we scroll past halfway for the first time. We log to the console, and update the value to be false. Then, we will check in our if statement if hasNotScrolledHalfway is true also.

<script>
var halfwayHeight = document.body.scrollHeight / 2;
var hasNotScrolledHalfway = true;
window.addEventListener("scroll", () => {
  // check if the scroll is past halfway
  // and the event hasn't fired yet
  if (document.body.scrollTop > halfwayHeight && hasNotScrolledHalfway) {
    // the user HAS scrolled halfway, so update the variable
    hasNotScrolledHalfway = false;
    console.log("Scrolled past halfway for the first time");
    active.track("", {})    
  }
})
<script>

Now, when the user scrolls past halfway for the first time, we will log to the console, but we will not log it more than once.


Now that we have the scrolling event taken care of, we need to make sure ActiveCampaign knows about them. To do so, we are going to use ActiveCampaign’s Event Tracking API. We will define a function that makes an AJAX call to the Event Tracking endpoint. Then when the user has scrolled past halfway, we call this function.

// our previous code is all above here ☝

// create a short function to fire the event tracking snippet. 
function scrolledHalfwayEvent() {


  // what we do here, is log a successful event to the console
  // or catch any errors we have
  var xhttp = new XMLHttpRequest();  
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log("Recorded halfway scroll event");
      console.log(this.responseText);
    } else {
      console.log(this.responseText)
    }
  };


  // change these to match your ActiveCampaign settings

  // your ActiveCampaign id. You can get this from your AC settings 
  var actid = ""; 

  // your event key, also in AC settings
  var eventKey = ""; 

  // Name for event you want to track.
  var event = "Scrolled Halfway" 

  var visit = {
    email: ""; // the user's email address
  }

  // get the url of the page and send it as event data
  var eventData = window.location.href;

  // build the eventString based on the variables you just edited above ☝
  var eventString = "actid=" + actid 
                    + "&key=" + eventKey 
                    + "&event=" + event 
                    + "&visit=" + encodeURIComponent(visit) 
                    + "&eventdata" + eventData;

  // send the event to the ActiveCampaign API with our event values
  xhttp.open("POST", "https://trackcmp.net/event", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send(eventString);
}
</script>

This is a bit of a bear, so I tried to comment the code as much as possible. We are building our AJAX call using the built-in XMLHttpRequest function. If this is your first time working with XMLHttpRequest, don’t worry, it hardly has anything to do with XML at all anymore.

Read more about JavaScript AJAX requests

There are a few places that you will need to change the code based on some of your ActiveCampaign account settings.

// your ActiveCampaign id. You can get this from your AC settings 
var actid = ""; 

// your event key, also in AC settings
var eventKey = ""; 

// whatever event you want to track.
var event = "Scrolled Halfway"  

// identify the user using the visit parameter
var visit = {

  // the user's email address
  email: ""
}

We also want to make sure that we differentiate which page a user scrolled halfway on. In order to do that, we will populate the event data with a string of the url of the current page. This will let us filter the event value inside ActiveCampaign.

var eventData = window.location.href;

Still with me?

Great! We are almost done. All that is left to do, is to call our new scrolledHalfwayEvent() from inside our event listener (when the user has scrolled halfway for the first time).

<script>
var halfwayHeight = document.body.scrollHeight / 2;
var hasNotScrolledHalfway = true;
window.addEventListener("scroll", () => {
  // check if the scroll is past halfway
  // and the event hasn't fired yet
  if (document.body.scrollTop > halfwayHeight && hasNotScrolledHalfway) {
    // the user HAS scrolled halfway, so update the variable
    hasNotScrolledHalfway = false;
    
    // call our scrolledHalfwayEvent function to track the event
    scrolledHalfwayEvent();
  }
})

// we define our scrolledHalfwayEvent() function down here👇

Thats it! You are now logging page scroll events to ActiveCampaign! Congratulations, if you made it this far, you are well on your way to being able to optimize anything in the funnel you want to.

Using A Tag Manager

Sending ActiveCampaign tracking events using Big Picture is very similar to how we setup the Google Analytics tracking with Big Picture in the first section. We just need to make sure that our ActiveCampaign account is configured in the integrations section.

Instead of setting up an action that fires whenever an element is clicked on, choose the “Page Scroll” event action instead. The Page Scroll event action will trigger anytime the user scrolls down the page 25%, 50%, 75%, or 100% by default. You can configure the action to only send the event when the user has scrolled 50% of the way down the page. To do so, change the Action “Type” from “All Events” to “50% Scrolled.” Give your event a name, save it, and publish your changes.

You can adjust which pages you want the event to fire on, as well as the parameters to include when you are sending the event. When you are finished customizing your event in Big Picture, publish your changes (upper right) and your page scroll events should start to show up.

Conclusion

Good event tracking hygiene is important. Logging ActiveCampaign activity to Google Analytics insures that you are accurately measuring your ad spend, and can effectively calculate cost per lead. Keeping ActiveCampaign informed of the behavior of your contacts on your owned sites helps you effectively understand their interests.

Understanding your contact’s interests and objectives is crucial to knowing how to send the right message to the right users at the right time. Hopefully these two ways of keeping your event tracking organized can help you achieve that result. Now get out there and grow that biz!

 

Example sites: Remake Detroit & Space Gear Store

A trial is worth a thousand words.
Get started today, no credit card required.