MotoCommerce
This document provides instructions to add the MotoCommerce widgets to your dealership website.
This widget acts as a Call-to-Action (CTA) button to direct the customer into MotoCommerce for a specific inventory vehicle. You are free to style this CTA in a way that matches the design on your website.
Step-by-step instructions
1. Add the following script tag inside the head tag of every page where the widget will be used.
Script:
<script src="https://lauriahyundai.motocommerce.ca/integration/integration.js"></script>
2. Create an element that is like this one where you want the CTA to be displayed on the page:
<a href="#" class="motocommerce-vehicle-link" data-stock-id="880140">Build Your Deal</a>
The widget script will update the href to the correct url inside MotoCommerce once the page loads.
Important
Your element must have these attributes:
- href="#"
- class="motocommerce-vehicle-link"
- data-stock-id="stock_or_vin_number"
Note: the "data-stock-id" attribute needs to be populated with the stock number or VIN number of the vehicle from inventory data source.
Example
<a href="#" class="motocommerce-vehicle-link" data-stock-id="880140">Build Your Deal</a>
Result:
<a href="http://app.dealerdomain/conf/[some_custom_id]" class="motocommerce-vehicle-link" data-stock-id="880140">Build Your Deal</a>
You can also specify which MotoCommerce module the CTA directs to by adding the additional attribute data-mc-page and specifying a value from the options below:
- purchase - Build your Deal page
- vdp - Vehicle Details page
- trade_in - Trade-In page
- credit - Credit Application page
- deposit - Deposit page
- appointment - Appointment page
Example
<a href="#" class="motocommerce-vehicle-link" data-mc-page="vdp" data-stock-id="880140">Vehicle Details</a>
Result:
<a href="http://app.dealerdomain/details/[some_custom_id]" class="motocommerce-vehicle-link" data-mc-page="vdp" data-stock-id="880140">Vehicle Details</a>
If the attribute data-mc-page is not specified, we use the default page to create the CTA.
The default page is the Build your Deal page, but can be customized.
Widget CTA Copies
We can customize the copy for each CTA, so it will be updated when the widget is loaded.
By default, our widget uses your default language for the copies
If you want, you can change the default language for the entire page by adding a query parameter in the script:
<script src="https://lauriahyundai.motocommerce.ca/integration/integration.js?defaultLang=en-ca"></script>
You also can change the copies dynamically by calling MOTOINSIGHT.updateView('en-ca')
These are your available language options:
- en-ca for English (Canada)
- fr-ca for French (Canada)
Analytics Tracking
We use ITM parameters to track data inside Google Analytics.
By default, you don't need to change anything, we identify each parameter automatically.
However, there's one parameter that you may need to specify. itm_medium
There are two possible values for itm_medium:
- vdp: a page with one vehicle
- vlp: a page with multiple vehicles
We check the number of VINs loaded into the page to choose between the two values, but depending of how the dealer pages works (eg.: dynamically replace contents without reload the scripts) it's necessary to specify the itm_medium so it matches the current state.
To specify the itm_medium you can use the data-mc-medium attribute in the widget
Example
<a href="#" class="motocommerce-vehicle-link" data-mc-medium="vdp" data-stock-id="880140">Build Your Deal</a>
Dynamic loading for widgets
If your page is built to dynamically load the Build Your Deal button widget or Login widget, then we recommend to run the function “MOTOINSIGHT.updateView()” to have our script parse your content as it loads. This will ensure that the proper MotoCommerce hyperlinks always gets generated and associated with the widgets as your page updates.
Example: call “MOTOINSIGHT.updateView()” if you have an infinite loader on your page, or if you populate HTML element attributes using some JavaScript code.
Demo:
