Getting Started with Autochart

Overview

Autochart provides a small JavaScript library which plugs into websites to allow events to be tracked using a simple API. This library works in a very similar way to tracking libraries such as Google Analytics, with the key difference being that Autochart allows you to join up website actions to the contact data within internet leads so that you know what actions your individual leads are performing on your site.

Installation

To install the Autochart library on your website, copy and paste the following JavaScript snippet to the end of the <head> section of all your webpages.


<script type="text/javascript">
window.autochart=window.autochart||[],window.autochart.methods=["init","page","trackVehicleView","trackSearch","trackVisitIntent","tag","trackLead","trackLeadForm","trackVehicleAction","trackFinance","ready","trackLeadFormAspNet"],window.autochart.factory=function(a){return function(){var b=Array.prototype.slice.call(arguments);return b.unshift(a),window.autochart.push(b),window.autochart}};for(var i=0;i<window.autochart.methods.length;i++){var method=window.autochart.methods[i];window.autochart[method]=window.autochart.factory(method)}window.autochart.load=function(a,b){var c=document.createElement("script");c.type="text/javascript",c.async=!0,c.src="https://az578655.vo.msecnd.net/tracker/"+b+"/autochart.track.min.js";var d=document.getElementsByTagName("script")[0];d.parentNode.insertBefore(c,d),window.autochart.init(a)},window.autochart.SDK_VERSION="0.10.4",/*!
  Replace <YourCustomerAccountIdHere> below with your customer API tracking key
*/
window.autochart.load("<YourCustomerAccountIdHere>",window.autochart.SDK_VERSION);
</script>

Replace <YourCustomerAccountIdHere> at the end of the snippet below with your customer account’s tracking key which you can access on the Account Settings page when you log in to the portal.

Event Tracking

The Autochart JavaScript API is designed to make it as easy as possible to track the most common actions visitors perform on automotive websites. Each API method takes different object types as parameters, each of which are described in the following sections.

Leads

The single most important event to track is the creation of a lead on your website, which usually occurs via an enquiry form. Once a visitor sends a lead and it’s tracked in Autochart, all previous and subsequent website actions performed by that visitor will be linked to them in the Autochart portal, giving you a full picture of their activity on your site.

The trackLead API method is used to send the lead information to Autochart. It takes a lead object as its parameter. The following example shows the structure of the lead object for a form enquiry about a Honda Civic, along with comments explaining the purpose of each field.

    var lead = {
        contact: {
            name: 'John Smith',
            phone: '(020) 5546 8100',
            email: 'johnsmith@example.com'
        },
        subject: 'Used Car Enquiry',
        message: 'Is this Honda still available? Can I come in to view it tomorrow afternoon?',
        channel: 'form', //Channel used to submit lead - this will typically be 'form' but could also be 'chat'
        vehicle: {
            registrationNumber: 'EG34 XYZ',
            title: 'Honda Civic DX-VP',
            make: 'Honda',
            model: 'Civic',
            trim: 'DX-VP',
            price: 17595,
            odometer: 20427, // miles or kilometres
            condition: 'Used',
            registrationYear: 2011,
            url: 'http://www.autodealer.example.com/vehicledetails/?id=9HGFA1F38BH510144',
            thumbnailUrl: 'http://www.autodealer.example.com/photos/9HGFA1F38BH510144-thumb.jpg'
        }
    };
    autochart.trackLead(lead);

None of the fields are mandatory but we recommend including as much data as is available on your web page. Note that the names of each field in the objects passed to Autochart API calls are case-sensitive and must match exactly those listed in the examples on this page. Also note that numeric fields such as currencies and distances will be assumed to be in the standard unit of measurement for your country. You do not need to include the measurement or currency symbol in the field value.

Searches

Tracking the search criteria used by a visitor will greatly help internet sales staff responding to a lead understand the shopper’s needs. The trackSearch API method allows you to do this by passing in an object containing the search criteria fields.

    var searchCriteria = {
        searchType: 'Advanced', //Use this if your site provides different types of search forms, e.g. By Body Style, By Budget, Advanced Search
        condition: 'Used', //Can be 'New', 'NearlyNew', 'Used' or 'Certified'
        make: 'Honda',
        model: 'Civic',
        trim: null,
        priceMin: null,
        priceMax: 20000,
        odometerMin: null,
        odometerMax: 50000,
        registrationYearMin: 2010,
        registrationYearMax: null,
        location: 'Surrey',
        locationRadius: 50, //miles or km from location
        bodyStyle: 'Sedan',
        transmission: null,
        financeDownPayment: 1000,
        financeMaxMonthlyPayment: 300,
        financeInterestRate: 6.9
    };
    autochart.trackSearch(searchCriteria);

If your website allows searching on fields not listed above, then simply add an extra field to the searchCriteria object with the value of that search parameter. If a search field listed above is not used in your website or is not specified by the shopper in the search form, then you can either set its value to null or just not include it at all in the searchCriteria object.

VDP Views

Use the trackVehicleView method as follows to track Vehicle details page (VDP) views:

var vehicle = {
    registrationNumber: 'EG34 XYZ',
    title: 'Honda Civic DX-VP',
    make: 'Honda',
    model: 'Civic',
    trim: 'DX-VP',
    price: 17595,
    odometer: 20427, // miles or kilometres
    condition: 'Used',
    registrationYear: 2011,
    url: 'http://www.autodealer.example.com/vehicledetails/?id=9HGFA1F38BH510144',
    thumbnailUrl: 'http://www.autodealer.example.com/photos/9HGFA1F38BH510144-thumb.jpg'
};
autochart.trackVehicleView(vehicle);

As with the other tracking methods, there are no mandatory fields in the vehicle object. However, we recommend that at a minimum you include the vehicleId, price, url, make and model fields so that sales reps viewing the Lead Profile on the Autochart Portal have enough info to identify the vehicle.

Other VDP actions

It’s also useful to track other actions a shopper takes on the VDP in order to get a better understanding of their needs or level of interest in a specific vehicle. The trackVehicleAction method allows you to do this. It takes 2 parameters, both are required:

  1. Vehicle: vehicle object being viewed (same structure as in trackLead and trackVehicleView methods)
  2. Action Type: nature of action. Examples of this are ‘PhotoView’, ‘Save’ (e.g. when users favourites the vehicle), ‘Compare’, ‘CalculateFinance’.
var vehicle = ... //as above
autochart.trackVehicleAction(vehicle, 'Save');

Visit/Purchase Intent Actions

There are some actions which a visitor can take on your website which are strong indicators that they are “low funnel” and may be ready to buy or visit your store very soon, e.g. viewing the opening hours or map/directions to your store. Tracking such actions will allow your sales reps using Autochart to qualify and prioritise leads more effectively. Use the trackVisitIntent method as follows to send this data to Autochart, passing in a single string parameter describing the nature of the action:

autochart.trackVisitIntent('OpeningHours');

Tagging a Visitor

Sometimes you may wish to assign an adhoc tag to a visitor in order to identify groups of visitors in a certain segment. For example, if your website is running a seasonal offer (e.g. winter tires) and a visitor clicks through to the offer page on your site, you may wish to tag them accordingly so that the sales rep can see this on the Autochart Lead Profile page and upsell this offer to the shopper when they follow up with them. You can use the tag method to do this as follows:

autochart.tag('Winter Tyres');

If you want to assign multiple tags at once, pass an array of strings to the tag method as follows:

autochart.tag(['Winter Tyres', 'Christmas Service Special']);