Behavior Tracking > Custom Action Tracking

Custom Action Tracking

How to track custom events on your site

With the Onespot script on your site, custom actions can be tracked in two ways: via Javascript and via HTML Markup. This page includes examples and technical details for both types.

OneSpot will automatically track events tagged with the onespot-action data attribute. If you would like OneSpot to track and report on specific actions, such as clicks to a button, or form submissions, then you can instrument this tracking directly in your HTML.
Lets say you would like to track whenever people click on a view product button on your website; for example your button may like this:
Hypothetical call to action button that we want to track

For the purposes of this example it doesn’t matter where this HTML button came from, you could have created it yourself or it could be powered by your CMS or some other 3rd party service on your site. The important thing is that clicking on the button is an action you would like to report on, perhaps you want to answer questions like:

  • What percentage of users click on view product buttons?
  • Are visitors that view more of our editorial content more likely than others to click this button?

These are reports that OneSpot can help you with, but first you will have to

  1. Have the OneSpot tracking Tag installed on the page where the action happens and
  2. Add some extra HTML markup to the button. The examples below show you how to do this
Lets say that the HTML for the button above looks like this
Sample HTML Button
<button>
  View Product
</button>
Your actual button might have more HTML associated with it (like classes, id, event handlers, etc).
Here, you just want OneSpot to be able to track when a user clicks the button. To do that, you would add the following attribute to your button HTML
Example 1: Tracking Button Clicks
<button data-onespot-action="click-view-product">
  View Product
</button>
This tells OneSpot that we should log clicks of this button as a business action named click-view-product
In addition to knowing that someone clicked to view a product, you may be interested in reporting on which product was clicked on. To do that you would add an additional attribute to your button HTML
Example 2: Track Product Name as a Property of Action
<button data-onespot-action="click-view-product"
        data-onespot-action-property="Bicycle Multi-Tool">
  View Product
</button>
This tells OneSpot that we should log the click on the button as an action named click-view-product and also associate the name of the product as a property of the action
Finally we also want to track what the price of the product the user clicked on was. To do that, we could add yet another HTML attribute to record this value
HTML
<button data-onespot-action="click-view-product"
        data-onespot-action-property="Bicycle Multi-Tool"
        data-onespot-action-value="22.95">
  View Product
</button>

This tells OneSpot that in addition to tracking the click on the button and the product name, the price should be tracked as a custom value for the item.

Value must be a numeric value, if you pass in a value that is not numeric then the tracking will fail.

You can add the following attributes to any element to track clicks or to form tag to track form submission.
data attribute description required? value type
onespot-action The name of the action being tracked. See "Naming Actions" below for more information. Example: tracking add to cart button click-add-to-cart true string
onespot-action-property A property associated with an action. Example: the name of the product being added to cart my-product-name false string
onespot-action-value The value associated with an action. Example: the price of the product 14.99 false string that can be coerced to number. See examples.
OneSpot will automatically track clicks on elements tagged with the onespot-action data attribute. The value of this attribute should be the name of the action to be tracked.
Tracking clicks
<a href="/demo/" class="learnmore" data-onespot-action="click-request-demo">Get a Demo</a>
Tracking clicks with property and value
<a class="add-to-cart" data-onespot-action="click-add-to-cart" data-onespot-action-property="my-product-name" data-onespot-action-value="14.99">Add To Cart</a>
Tracking multiple click points
<button class="demo-button" data-onespot-action="click-request-demo">
  <a href="/demo/" class="learnmore" data-onespot-action="click-request-demo">Get a Demo</a><i class="demoicon" data-onespot-action="click-request-demo"/>
</button
OneSpot will automatically track submissions to form elements with the onespot-action data attribute. The data attribute must be added to the main form element.
Tracking form submissions
<form  action='/request-demo' method="POST" id="demo-request-form" data-onespot-action="submit-demo-request-form">
  <input name="email-address" type="text" />
  <input type="submit">Submit</input>
</form>
HTML
<form  action='/checkout' method="POST" id="secure-checkout" data-onespot-action="cart-checkout-form-submit" data-onespot-action-property="cart-total" data-onespot-action-value="48.76">
  // inputs
  <input type="submit">Submit</input>
</form>
Tracking form-like elements
<input name="newsletter"></input><button class="newsletter-button" data-onespot-action="click-newsletter-sign-up">Sign Up</button>
In the document head, set a global variable _onSiteQ as shown below, then use _onSiteQ.push(fn) to add functions to the queue for execution when the Onsite script has been loaded, or immediately execute if the script is already loaded.
HTML
<head>
  <script>
    var _onSiteQ = _onSiteQ || [];
  </script>
  <!-- OneSpot script should be included BELOW the _OnSiteQ -->
</head>
method params
window.onespot.onsite.trackCustomAction Custom Action Parameters (see below)
parameter description required? value type
label The name of the action being tracked. See "Naming Actions" below for more information. Example: tracking add to cart button click-add-to-cart true string
property A property associated with an action. Example: the name of the product being added to cart my-product-name false string
value The value associated with an action. Example: the price of the product 14.99 false number
JavaScript
function trackAddToCart() {
  window.onespot.onsite.trackCustomAction('click-add-to-cart', 'Bicycle Multi-Tool', 22.95)
}
_onSiteQ.push(trackAddToCart);
To see results of custom action tracking, please discuss your goals and objectives with your OneSpot Customer Success Manager, who will assist with result delivery.