Tracking API Cookbook

Four simple ways to track with gusto using the SharpSpring Ads Tracking API

With retargeting, performance often comes down to how smart your tracking is.  If you can advertise to EXACTLY the audience you want to reach, to *ahem* your SharpSpring Ads, you will get the results you're looking for.  

To make that happen, SharpSpring Ads offers ways to track users based on URL path, querystring and regular expression matching.  But there's another tracking method that our smartest customers make use of, our Javascript Tracking API, which lets you fire a pixel anytime an arbitrary Javascript action fires.  Using this API you can cookie users in incredibly intricate, dynamic ways.

In this article we're going to look at 4 common use cases and how to use the API for them.

But first, let's make sure we're clear about what we're discussing.  In your SharpSpring Ads account, when you create new Audiences there are 5 options for setting up an Audience.

Example #1: Track users based on time on page

For example, suppose you want to fire a conversion pixel when a user stays on a page for 3 seconds or more. 

Here is how you would do it:

1. Load the SharpSpring Ads tag on your site
2. Create a conversion goal with an "Event" retargeting type, and input a value.
3. After the window loads, set a timer that calls _pq.push(["track", "Event name"]);

$(document).ready(function() {
  window._pq = window._pq || [];
  var delayLength = 3000;
  setTimeout(function(){
    _pq.push(["track", "User visited"]);
  }, delayLength);
});

Demo

 

---

 

Example #2: Track users who hover over specific page elements

What if you want to trigger a conversion when a user hovers over part of your web site?

1. Load the SharpSpring Ads tag on your site
2. Create the conversion goal.
3. Identify a CSS class or ID to use to trigger the pixel firing.
4. After the window loads, set an event listener on your HTML element identified in step 2.
5. When the user hovers over the element you chose, the pixel will be fired.

This example fires when an element of a class name is hovered over:

$(document).ready(function() {
  window._pq = window._pq || [];
  $('.demo2a').one('mouseenter', function() {
    _pq.push(["track", "User hovered"]);
  }); });

Please note that the ".one" method is used to execute the event handler only once. More information here.

Demo

 

---

 

Example #3: Track users who click specific page elements

Similarly, when a user clicks an element that you have decided, you can also fire a conversion. This code example fires when an element with a specific ID is clicked:

$(document).ready(function() {
  window._pq = window._pq || [];
  $('.demo3a').one('click', function() {
    _pq.push(["track", "User clicked"]);
  }); });

Please note that the ".one" method is used to execute the event handler only once. More information here.

Demo

 

---

 

Example #4: Track users based on referrer

Lastly, if a user has arrived to your web site form another web page that you have identified, you can also fire off the tracking pixel.

$(document).ready(function() {
  window._pq = window._pq || [];
  if (document.referrer !== "") {
    var referringURL = document.referrer;
    if (referringURL.match(/^https?:\/\/([^\/]+\.)?google\.com(\/|$)/i)) {
      _pq.push(["track", "Came from Google"]);
    }
  }
});

Demo

---

Feel free to use these code samples and modify them for your own purposes!

Also, let us know if you've used the tracking API in creative ways - we'd love to hear what you've done!

Contact us at ads@sharpspring.com if you have any questions.