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

Demo: https://vvs.autosyncstudio.com/demo.html

Table of Contents

minLevel	1
maxLevel	7

...

Create a container div with an ID.
Code Block
<div id="EXAMPLE-ID"></div>
Import the script into your page. This script should be at the end of the body tag.
Code Block
<script src="AUTOSYNC_API_URL/js/Autosync.js"></script>
Call the AutosyncVisualizer constructor. You must provide the API key and the container ID. Use object notation to provide the following values.
- Required:
  - id – The ID of the container
  - key – The API key provided for you in the portal
- Optional:
  - scrollBar – Show or hide the visualizer’s scroll bar; by default it's set to false
  - productSegment- Show only the interface for one product’s segment, it can be an array with more or a string for only one option, this are the valid values:
    - tires - Allows a tire’s brand page and a interface to see each tire by it self
    - wheels - Allows a wheel’s brand page and a interface to see each wheel by it self
    - accessories - Allows a accessory’s brand page and a interface to see each accessory by it self
    - vehicles - Allows the VOV (View on vehicle) Images for each of the others segments. Important: This segment can’t be set alone, must be set with other segment
  - startPage - Use a segment page as home page. This are the valid values:
    - vehicles - It will use the Make’s page as home page
    - wheels - It will use the Wheel’s brands page as home page
    - tires - It will use the Tire’s brands page as home page
    - Any Path used on the visualizer - It should be an Path that already is available on the visualizer for example:
      Code Block
      language none
      /vehicles/Jeep /vehicles/2023/Jeep/Gladiator /tires/brands /wheels/brands . . . etc
      IMPORTANT: Only paths that are already working on your visualizer can be configured here. If a Path that doesn’t exists is gave then the visualizer will not work properly.

Note
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:

...

language	html

...

- - - To get valid paths you can use your API Key on
      Code Block
      https://vvs.autosyncstudio.com/YOUR_API_KEY
      Then you will have an URL like this one:
      Code Block
      https://vvs.autosyncstudio.com/vehicle/2023/Acura/Integra
      And the path will be this part:
      Code Block
      /vehicle/2023/Acura/Integra

Note
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:

Code Block

language	html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>

    <script src="https://vvs.autosyncstudio.com/js/Autosync.js"></script>
  </head>
  <body style="margin: 0">
    <div id="YOUR_CONTAINER_ID"></div>
    <script>
		var autosync = new Autosync({
			/* Required */
			id: "autosync-visualizer",
			key: "api_test",

			/* Optional */
			scrollBar: false,
			/*
				Options: 'home', 'vehicles', 'tires', 'wheels', 'accessories'
				Default: ['vehicles', 'hometires'
				Example:, 'wheels']
					-Important startPage: 'vehicles' // It will start the visualizer on the vehicle makes page
			*/
			startPage: null, 
		});
	</script>
  </body>
</html>

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.

Click on API in the sidebar menu
Open your key configuration page
Go to the section Visualizer Configuration
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.

Image Removed

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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)

...

select_favorite

...

item_brand
item_name
item_id
item_style_id

...

With this we can track wich products are liked more by users.

item_brand: String. Brand name of selected brand.
item_name: String. Large description for the product.
item_id: Int. Product’s ID.
item_style_id: Int. Product’s style ID.

...

BUILDER PAGE

Hit on this Icon, if the star is colorized then is selected as favorite

...

remove_favorite

...

item_brand
item_name
item_id
item_style_id

...

With this we can track wich products are removed from favorites.

item_brand: String. Brand name of selected brand.
item_name: String. Large description for the product.
item_id: Int. Product’s ID.
item_style_id: Int. Product’s style ID.

...

BUILDER PAGE

Hit on this Icon, if the star is not colorized then is removed as favorite or not stored as favorite.

...

show_wheel_view

...

item_id
item_name

...

This event is to track the interest to see better the products.

item_name: String. Large description for the product.
item_id: Int. Product’s ID.

...

BUILDER PAGE

Hit on ‘Product view’ button.

...

Will be switched to wheel view.

...

change_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…

...

request_for_quote

...

item_id
item_style_id
item_brand
item_model
item_finish
item_color
item_diameter
item_accent
item_name
item_quantity
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

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

...

item_id: Int. Product’s ID.

...

item_style_id: Int. Product’s style ID.

...

item_brand: String. Brand name of selected brand.

...

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_diameter: Int. Diameter of selected product.

...

item_accent: String. Accent of selected product.

...

item_name: String. Large description for the product.

...

can't be used on its own, 'tires', 'wheels' or 'accessories' must be included with it
				Examples:
					- productSegment: ['vehicles', 'wheels']
					- productSegment: 'tires'
			*/
			productSegment: null,

			/*
				Options: 'home', 'vehicles', 'tires', 'wheels'
				Default: 'home'
				Example:
					- startPage: 'vehicles' // It will start the visualizer on the vehicle makes page
			*/
			startPage: null, 
		});
	</script>
  </body>
</html>

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.

Click on API in the sidebar menu
Open your key configuration page
Go to the section Visualizer Configuration
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.

Image Added

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
`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 Image Added
`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 Image Added
`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 Image Added
`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 Image Added
`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 Image Added
`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 Image Added
`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 Image Added And select a color Image Added
`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) Image Added
`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. Image Added 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… Image Added
`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_`

id

state:

Int. Id of the location on our administration portal

String. Location’s state name.
location_

name

city: String. Location’s city name

configured on our administration portal

.
location_

country

address: String. Location’s

country name

address.
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.

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.

Image Removed

item_name: String. Large description for the product.

item_id: Int. Product’s ID.

Image Added

as_start_request_for_quote

item_id
item_name

When an user hits ‘Request for quote’ button.

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

BUILDER PAGE (WHEEL VIEW)

Hit ‘Request for Quote’ button.

Image Removed

Image Added

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)

Image Removed

show_wheel_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.

.

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

BUILDER PAGE (WHEEL VIEW)

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

Image Removed

change_wheel_configuration

Image Added

as_show_wheel_details

as_show_tire_details

item_id
item

_namefilter

_name

filter_value

This

helps

event is to track

configurations used for users

the interest to know more about products.

item_name: String. Large description for the product.
item_id: Int. Product’s ID

.

filter_name: String. Filter name.

filter_value: String. Value to filter products

.	BUILDER PAGE (WHEEL VIEW)

Change some wheel configuration.

Image Removed

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

Image Added

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.

Image Removed

Image Added

Image Modified

Versions Compared

Old Version 34

New Version Current

Key

2. Google Analytics

How to use your own Google Analytics dashboard

User properties

Events

2. Google Analytics

How to use your own Google Analytics dashboard

User properties

Events

Page Comparison

Versions Compared

Old Version 34

New Version Current

Key

2. Google Analytics

How to use your own Google Analytics dashboard

User properties

Events

2. Google Analytics

How to use your own Google Analytics dashboard

User properties

Events