E-Commerce JavaScript Code Examples

Introduction

Successful analytics for e-commerce begins at implementation. The complexity of the questions an e-commerce marketer needs answered must be matched by the sophistication of the tool they ask them of. In order for that tool to return a detailed output, it needs a detailed input - this is where we come in.

We know the best way to structure your e-commerce Events and Properties to answer the questions unique to the e-commerce marketplace. Our recommended methods are described below. For more information on this subject, you can also check out our E-Commerce Naming Conventions Guide , our E-Commerce essentials and our Javascript Library .

Getting Started

Well, actually, before getting started, it is important to note that if you intend to track revenue in Kissmetrics, you must: i) pass the revenue data to us server-side; and ii) strictly follow our E-Commerce Naming Conventions Guide. No matter what you hear, tracking revenue client-side using JavaScript will be inaccurate. Period. Technology and human behavior introduce far too much variability to rely on something as important as revenue.

Alright, now we can get started. The first step is to implement your Javascript Snippet 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 ad campaigns in order to track their performance.

Below are some recommended non-revenue Events and Properties you should consider implementing. Note that everything in double brackets (<<>>) needs to be replaced with an element ID or a variable.

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>>'}]);

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

_kmq.push(['This was a trick', 'REMEMBER - TRACK REVENUE SERVER-SIDE!'])

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', '<<[email protected]>>']);

Integrations

Be sure to look at our Integrations 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 Tool or your browser's developers 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.