E-Commerce JavaScript and Server-Side Code Examples

• Introduction
• Getting Started
• Track Custom Info
  • Identifying Your Users
• Integrations
• Troubleshooting

Introduction

Below is some basic information for you to get started with Kissmetrics. Please let your account manager know if you need information outside of our JavaScript and server side APIs. Everything in <<double brackets>> needs to be replaced with an element ID or a variable. Also, for more information, you can use our E-commerce Essentials Guide and JavaScript Library.

IMPORTANT - When using both JavaScript and server-side libraries, you must reuse the JavaScript ID so that your customer’s historical information stays consistent. If you switch to server-side tracking and use a new customer ID, this will create a new user and you will have a disconnect between JS and server-side. Refer to this support page for more details.

Getting Started

First step is to implement your JavaScript code block in the header of all of your pages. This will track all of our automatic events and properties like Visited Site and Ad Campaign Hit. Be sure to use UTM parameters with any ads in order to track the details of the ads.

We will now start tracking your custom events and properties. Here are some things you should track for your E-commerce site:

Track Custom Info

We will first want to track when someone searches a product within your website. Use trackSubmit to track your search form. All you need is the ID of your search form and we will track the event and answers submitted:

_kmq.push(['trackSubmit', '<<ELEMENT_ID_OR_CLASS>>', 'Product Search']);

Now you should track when someone views a product. You can use our most record call. This is our most fundamental call which tracks events and properties of your users:

_kmq.push(['record', 'Viewed Product', {'Product Viewed SKU':'<<Value>>', 'Product Viewed Name':'<<Value>>', 'Product Viewed Price':'<<99.95>>'}]);

When someone adds an item to the cart, we should track this with our record call:

_kmq.push(['record', 'Add to Cart', {'Add to Cart SKU':'<<Value>>', 'Add to Cart Name':'<<Value>>', 'Add to Cart Price':'<<99.95>>'}]);

Then when they view the cart:

_kmq.push(['record', 'Viewed Cart', {'Viewed Cart SKU':'<<Value>>', 'Viewed Cart Name':'<<Value>>', 'Viewed Cart Price':'<<99.95>>'}]);

Tracking the checkout process is one of the most important parts of Kissmetrics. Once again you can use our record call to track this:

_kmq.push(['record', 'Start Checkout', {'Checkout SKU':'<<Value>>', 'Checkout Name':'<<Value>>', 'Checkout Price':'<<99.95>>'}]);

Alternatively:

<?
  KM::identify($_COOKIE['km_ai']);
  KM::record('Start Checkout', array('Checkout SKU' => '<<Value>>', 'Checkout Name' => '<<Value>>','Checkout Price' => '<<99.95>>'));
?>

Finally, track the complete checkout / purchase. This should fire at the end when the user has confirmed the purchase.

_kmq.push(['record', 'Checkout Complete', {'Purchased SKU':'<<Value>>', 'Purchase Name':'<<Value>>', 'Purchase Price':'<<99.95>>'}]);

Alternatively:

<?
  KM::identify($_COOKIE['km_ai']);
  KM::record('Checkout Complete', array('Purchased SKU' => '<<Value>>', 'Purchased Name' => '<<Value>>','Purchased Price' => '<<99.95>>'));
?>

Most E-commerce stores have sign ups, logs in and newsletter sign ups. These form submissions can be tracked with trackSubmit:

_kmq.push(['trackSubmit', '<<ELEMENT_ID_OR_CLASS>>', 'Signed Up']);

_kmq.push(['trackSubmit', '<<ELEMENT_ID_OR_CLASS>>', 'Login']);

_kmq.push(['trackSubmit', '<<ELEMENT_ID_OR_CLASS>>', 'Newsletter']);

Identifying Your Users

Finally, if you were not able to identify your user when they signed up with our trackSubmit call (example above), you can use our identify call and manually ID the customer:

_kmq.push(['identify', '<<bob@bob.com>>']);

Integrations

Be sure to look at our integration page to see if you can easily pass us in information from your other tools. Mailchimp, Optimizely and VWO are the most popular tools we integrate with.

Troubleshooting

You will need to use our Live Stream or your browser’s developer tools to make sure the events and properties are coming in correctly. You do not need to wait 30 minutes to see if the information is correct. This will speed up your implementation tremendously.