AutoSync Visualizer

Owned by Antony Brenes
Last updated: Dec 03, 2024
11 min read

AutoSync Visualizer relies on AutoSync API, see more in the AutoSync API documentation.

Demo: AutoSync Visualizer | Demos

 

1. How to embed a visualizer

To add the visualizer to any page you must have a valid AutoSync API key. If you have a valid API key you can proceed to:

  1. Create a container div with an ID.

    <div id="EXAMPLE-ID"></div>

  2. Import the script into your page. This script should be at the end of the body tag.

    <script src="AUTOSYNC_API_URL/js/Autosync.js"></script>

  3. Call the AutosyncVisualizer constructor. You must provide the API key and the container ID. Use object notation to provide the following values.

Required Parameters

id (String)

  • Description: The ID of the visualizer container

  • Usage: A unique identifier for the visualizer container in the DOM

  • Example:

id: 'autosync-visualizer'

 

key (String)

Description: Your API key for authentication.
Usage: Ensure you replace 'YOUR_API_KEY' with a valid API key.
Example:

Optional Parameters

adaptiveHeight (Boolean)

Description: Adapts the iframe's height to the content inside.
Default: false
Example:

customStyleSheet (String | null)

Description: Adds a custom stylesheet to modify the visualizer's style.
Default: null
Example:

disableQuoteForm (Boolean)

Description: Disables the quote form after a user interaction with "Quote," "Buy," or "Add to Cart" buttons.
Default: false
Example:

homeStyle (String | null)

Description: Determines the home layout style of the visualizer.
Options: 'lookup', 'segment_selection', 'vehicle_make_selection'
Default: null
Example:

onEvent (Function | null)

Description: A callback function triggered on specific events.
Default: null
Example:

productSegment (Array | String | null)

Description: Defines the product segments displayed in the visualizer.
Options: 'vehicles', 'tires', 'wheels', 'accessories'
Default: ['vehicles', 'tires', 'wheels']
Important: 'vehicles' must be combined with at least one other option.
Example:

startPage (String | null)

Description: Specifies the page where the visualizer will start.
Options: 'home', 'vehicles', 'tires', 'wheels'
Default: 'home'
Example:

scrollBar (Boolean)

Description: Enables or disables the scrollbar.
Default: false
Example:

widget (Boolean | Object)

Description: Configures additional widget features.
Default: false
Details: If an object is provided, the following properties are available:

  • sizesLookup (Boolean): Enables size lookup.

  • brandsLookup (Boolean): Enables brand lookup.

  • vehiclesLookup (Boolean): Enables vehicle lookup.

  • redirectUrl (String): URL to redirect the user after specific interactions.

  • styles (String): CSS code for additional customization.

Examples:
Enable the widget:

Customize the widget:

Complete Example Configuration

Each domain where the visualizer is embedded must be whitelisted in the settings of the API key used for the visualizer in the portal.

Implementation example:

 

2. Google Analytics

Visualizer stats are tracked with Google Analytics. You can request access from AutoSync staff.

How to use your own Google Analytics dashboard

You may provide us with your own Measurement ID through the portal following the steps below.

  1. Click on API in the sidebar menu

  2. Open your key configuration page

  3. Go to the section Visualizer Configuration

  4. Paste you Measurement ID into the field labeled “Measurement ID”

User properties

Visualizer configuration, set in the portal under Visualizer Configuration section, is tracked with Google Analytics (under user_properties). This is mainly to know which settings are the most popular to improve our services for our customers.

 

Properties:

  • visualizer_key – the key provided to our customers to use the visualizer.

  • visualizer_ga4_key – the key provided by our customers to user their own Google Analytics dashboard.

  • custom_logo – a configuration for the visualizer, this means if our customers are using a logo on the visualizer.

  • custom_background_image – a configuration for the visualizer, this means if our customers are using a background image on the visualizer.

  • thumbnails_mono – a configuration for the visualizer, this means if our customers are using thumbnails with monochromatic colors.

  • scroll_into_view – a configuration to align the visualizer to the top of the page when user is using it.

  • align_home_page_to_top – a configuration for the visualizer, this means if our customers likes a home page with the content centered or aligned to the top.

  • listing_vehicles_by_year – a configuration for the visualizer, this means if our customers wants to see on each make's page all the vehicles at the same time or separated by year (Different pages)

  • pagination_size – a configuration for the visualizer, this means if our customers wants to show more or less items per page for products.

  • utm_source – a property that means from where is using the user the visualizer. If is using our stage page Stage page you will see the value “AutoSync Stage” in other case you will see a domain name.

 

Events

AutoSync Visualizer has a complete event tracking configuration, here is the list of events configured.

Event name

Attributes

Description

Where

Event name

Attributes

Description

Where

as_page_view

  • page_parent_location

  • page_location

  • page_title

Visited pages.

  • page_parent_location: String. Domain name of the website that embeds the visualizer

  • page_location: String. The URL of the visited page

  • page_title: String. The name of the visited page

 

 

ALL PAGES

as_search_tool_query

  • search_query

  • search_type

  • search_results

  • search_makes

  • search_brands

With this event we can know what are the users searching.

  • search_query: String. Words used by the user to search something

  • search_type: String. What is looking for (Vehicles, Wheels, Tires, Accessories, etc...)

  • search_results: Int. How many results has that query

  • search_makes: Int. Number of makes found with the query (Only for search_type: vehicles)

  • search_brands: Int. Number of brands found with the query (Not for search_type: vehicles)

HOME PAGE

 

as_search_tool_selection

For vehicles:

  • vehicle_make

  • vehicle_model

  • vehicle_year

  • vehicle_body

  • vehicle_name

For products:

  • item_brand

  • item_model

  • item_style_id

For makes:

  • make_name

Form brands:

  • brand_name

When an user found a vehicle or a product through the search tool.

Each kind of selection has their own attibutes.

  • vehicle_make : String. Make name of selected vehicle.

  • vehicle_model: String. Model name of selected vehicle

  • vehicle_year: Int. Year of the selected vehicle.

  • vehicle_body: String. Body type of selected vehicle.

  • vehicle_name: String. Large description for the vehicle. Year, Make, Model and Body type.

 

  • item_brand: String. Item’s brand name.

  • item_model: String. Item's model.

  • item_style_id: Int. Item’s style ID. If it has

 

  • make_name: String. Make name of selected make.

 

  • brand_name: String. Brand name of selected brand.

HOME PAGE

 

as_select_make

  • make_name

Looks for each make selection on vehicle’s makes page.

  • make_name: String. Make name of selected make.

VEHICLE’S MAKE PAGE

 

as_select_brand

  • brand_name

  • brand_type

Looks for each brand selection on product’s brands page.

  • brand_name: String. Brand name of selected brand.

  • brand_type : String. Type of product selected.

TIRE’S BRAND PAGE

 

as_select_brand

  • brand_name

  • brand_type

Looks for each brand selection on product’s brands page.

  • brand_name: String. Brand name of selected brand.

  • brand_type : String. Type of product selected.

WHEEL’S BRAND PAGE

 

as_select_vehicle

  • vehicle_id

  • vehicle_make

  • vehicle_model

  • vehicle_submodel

  • vehicle_year

  • vehicle_type

  • vehicle_body

  • vehicle_drw

  • vehicle_name

This events is telling us which vehicles are loaded on the “Builder” or page for visualization.

  • vehicle_make : String. Make name of selected vehicle.

  • vehicle_model: String. Model name of selected vehicle

  • vehicle_submodel: String. Submodel name of selected vehicle

  • vehicle_year: Int. Year of the selected vehicle.

  • vehicle_type: String. Type of selected vehicle (SUV, CAR, VAN, etc).

  • vehicle_body: String. Body type of selected vehicle.

  • vehicle_drw: Boolean. If the vehicle is dually or not.

  • vehicle_name: String. Large description for the vehicle. Year, Make, Model and Body type.

BUILDER PAGE

 

as_change_vehicle_color

  • vehicle_id

  • vehicle_name

  • vehicle_color

What colors are popular for each kind of vehicle, etc… In this way we can help to get accessories or wheels with popular colors.

  • vehicle_id: Int. Vehicle selected ID

  • vehicle_name: String. Large description for the vehicle. Year, Make, Model and Body type.

  • vehicle_color: Int. Color code selected

BUILDER PAGE

Hit on this button

And select a color

 

as_select_wheel

  • item_brand

  • item_name

  • item_model

  • item_finish

  • item_color

  • item_accent

  • item_diameter

  • item_style_id

  • item_id

To know what wheels are popular.

  • item_brand: String. Brand name of selected brand.

  • item_name: String. Large description for the product.

  • item_model: String. Model name of selected product.

  • item_finish: String. Finish name of selected product.

  • item_color: String. Color name of selected product.

  • item_accent: String. Accent of selected product.

  • item_diameter: Int. Diameter of selected product.

  • item_style_id: Int. Product’s style ID.

  • item_id: Int. Product’s ID.

BUILDER PAGE

Select a wheel, if card has a border then is selected (Only manual selections are tracked)

as_show_wheel_view

 

This event is to track the interest to see better the products. This is for internal use, we can know whick view is more popular and do improvements on the UI and UX

BUILDER PAGE

Hit on ‘Wheels’ button on the gray navegation bar.

 

 

Will be switched to wheel view.

as_select_filter

  • filter_name

  • filter_value

To know preferred products visual filters and sizes.

  • filter_name: String. Filter name.

  • filter_value: String. Value to filter products.

BUILDER PAGE

Filter products list by color, size, brand, etc…

 

 

as_request_for_quote

  • vehicle_id

  • vehicle_make

  • vehicle_model

  • vehicle_submodel

  • vehicle_year

  • vehicle_body

  • vehicle_drw

  • vehicle_name

  • location_id

  • location_name

  • location_country

  • location_state

  • location_city

  • location_address

  • location_zip

  • location_phone

  • type

  • url

  • data

  • requestType

  • products

  • services

With this you can collect the data from the request for quotes and see popular stores, locations, products and vehicles.

  • vehicle_id: Int. Vehicle selected ID

  • vehicle_make : String. Make name of selected vehicle.

  • vehicle_model: String. Model name of selected vehicle

  • vehicle_submodel: String. Submodel name of selected vehicle

  • vehicle_year: Int. Year of the selected vehicle.

  • vehicle_body: String. Body type of selected vehicle.

  • vehicle_drw: Boolean. If the vehicle is dually or not.

  • vehicle_name: String. Large description for the vehicle. Year, Make, Model and Body type.

  • location_id: Int. Id of the location on our administration portal.

  • location_name: String. Location’s name configured on our administration portal.

  • location_country: String. Location’s country name.

  • location_state: String. Location’s state name.

  • location_city: String. Location’s city name.

  • location_address: String. Location’s address.

  • location_zip: String. Location’s zip code or postal code.

  • type: String. RFQ type: ‘Webform’ or ‘API’

  • url: String. Url used to send the RFQ

  • data:Object | String. Is the data sent to the request

  • requestType: String. POST or GET

  • products: Object. It will include a JSON with the product Id and the quantity

  • services: Object. It will include a JSON with the service Id, product Id and the quantity

BUILDER PAGE (WHEEL VIEW)

Sent a request for quote after fill all the information required.

 

 

as_start_request_for_quote

 

This event is for internal uses. We use it to track UI and UX

BUILDER PAGE (WHEEL VIEW)

Hit ‘Request for Quote’ button.

 

 

as_request_location

  • location_query

This works to know which location users are looking for.

  • location_query: String. Words used by the user to search locations.

BUILDER PAGE (WHEEL VIEW)

 

as_show_wheel_details

as_show_tire_details

  • item_id

  • item_name

This event is to track the interest to know more about products.

  • item_name: String. Large description for the product.

  • item_id: Int. Product’s ID.

BUILDER PAGE (WHEEL VIEW)

On wheel view hit on ‘Specifications’ button to see all the wheel information.

 

as_share

  • item_brand

  • item_name

  • item_finish

  • tem_color

  • item_accent

  • item_diameter

  • item_style_id

  • item_id

  • vehicle_id

  • vehicle_make

  • vehicle_model

  • vehicle_submodel

  • vehicle_year

  • vehicle_type

  • vehicle_body

  • vehicle_drw

  • vehicle_name

     

This helps to know wich vehicle and products configurations are getting shared.

  • item_brand: String. Brand name of selected brand.

  • item_name: String. Large description for the product.

  • item_finish: String. Finish name of selected product.

  • item_color: String. Color name of selected product.

  • item_accent: String. Accent of selected product.

  • item_diameter: Int. Diameter of selected product.

  • item_style_id: Int. Product’s style ID.

  • item_id: Int. Product’s ID.

  • vehicle_id: Int. Vehicle selected ID

  • vehicle_make : String. Make name of selected vehicle.

  • vehicle_model: String. Model name of selected vehicle

  • vehicle_submodel: String. Submodel name of selected vehicle

  • vehicle_year: Int. Year of the selected vehicle.

  • vehicle_body: String. Body type of selected vehicle.

  • vehicle_drw: Boolean. If the vehicle is dually or not.

  • vehicle_name: String. Large description for the vehicle. Year, Make, Model and Body type.

BUILDER PAGE

Hit on some of the ‘Share’ buttons.

 

 

 

 

 

AutoSync © 2019-2021 All Rights Reserved