Tracking JavaScript Commerce Actions

Commerce Event Script Guide

Event Name: '__commerce_action__'

In order for Funnelytics to display revenue metrics on the canvas, the Event must be named "__commerce_action__".

Within the Funnelytics Canvas itself, the commerce action will appear as an action named "Purchase".

<script>

window.funnelytics.events.trigger('__commerce_action__', {
__sku__: //product ID,
__label__: //product Name,
__order__: //order ID,
__total_in_cents__: //product value represented in cents,
__currency__: 'USD'
});

</script>

Funnelytics Commerce Event Schema


Properties of the event:

The event are organized into key and value pairs, they keys may include, but are not limited to:

Name

Type

Req.

Description

__label__

 string    product Name 
__sku__  string   product ID
__order__  number   order ID
__total_in_cents__  number   product value in cents
__currency__  string    USD (only accepted value for the moment)


The keys are not required, though without a total present, no revenue metrics will be displayed on the canvas. Currently, the currency key will only accept a value of 'USD'


Any additional information associated with a purchase may be passed as a string and mustn't adhere to any strict naming conventions, with the exception of name and email, which must appear as "name" and "email" in order to deanonymize individuals within the Funnelytics Canvas.

Similar to the Generic Event script, Commerce Action properties are confined to a simple data structure. Should a purchase event contain more than a single product, we would need to loop through the array of objects and fire a Commerce Action for each iteration.

 

Consideration: If your purchase event is set to fire on a page load, for example on a thank you page, it is important to first check and make sure that the Funnelytics Base Script has finished loading before firing your Commerce Action Script

We would recommend employing the setInterval method to call a function, similar to what we see below.

<script>

  var funnelyticsChecker = window.setInterval(function(){

      if (!window.funnelytics || !window.funnelytics.step) {
            return
      }
  
      window.clearInterval(funnelyticsChecker);

    //do things here

 },400)

</script>

 

Examples of Commerce Action Scripts

<script>

window.funnelytics.events.trigger('__commerce_action__', {
__sku__: '251354815',
__label__: 'Awesome Sauce',
__order__: '001351',
__total_in_cents__: '1599',
__currency__: 'USD'
});

</script>

Single Product Script:

Example of what a purchase event script may look like where a customer may only purchase a single item

 

<script>
var purchase = {
  "currency": "USD",
  "customer_id": '912618912619',
  "customer_locale": "en",
  "email": "test@testerson.com",
  "location_id": null,
  "order_id": '001351',
"line_items": [
{
"product_name": "Awesome Sauce",
"product_id": "251354815",
"product_price": '15.99',
},
{
"product_name": "Super Awesome Sauce",
"product_id": "25115924",
"product_price": '25.99',
},
{
"product_name": "Super Awesome Sauce Supreme",
"product_id": "251352654",
"product_price": '55.99',
},
       {
          "product_name": "Ambrosia",
          "product_id": "0000000001",
          "product_price": '500.00',
         } 
]  
}
</script>

Multiple Product Script:

This is an example of an array of objects, similar to what we might see in a dataLayer push, or JavaScript object associated with a purchase event.

In order to track all the items in the above we would configure our script as follows

 

<script>

//declare items array
var items = purchase.line_items;

//loop through the array of items
for(i=0; i<items.length; i++){

//for each item convert the price into a value in cents
var total = Math.round(items[i].product_price * 100).toString();

//for each item fire a funnelytics commerce event
window.funnelytics.events.trigger('__commerce_action__', {
__sku__: items.product_id,
__label__: items.product_name,
__order__: purchase.order_id,
__total_in_cents__: total,
__currency__: 'USD'
})
}
</script>

 

 

Something missing?

if something is missing in the documentation or if you found some part confusing, please reach out to support team, with your suggestions for improvement.

We love hearing from you!