UseInsider integrate vtex stores with Insider plataform.

Install the app with the following command: vtex install codeby.userinsider@1.x

Open the app settings on your admin and fill the form with Partner ID and Partner Name. You can find yours at the Use Insider Main page.

Advanced Settings

In the advanced settings section, you can set the minicart custom pixel event id. This is used to open the Minicart on Insider AddToCart function. To find what you need to set, check the prop "customPixelEventId" on the "minicart.v2" block of your theme and set the same value.

app settings panel path link: https://{AccountName}.myvtex.com/admin/apps/codeby.useinsider@{AppVersion}/setup/

Add the following snippet on the file checkout6-custom.js and replace "YOUR-PARTNER-ID" and "YOUR-PARTNER-NAME” with your UseInsider "partnerId" and "partnerName":

If your theme is not using the checkout-ui-custom application, add the snippet right in the checkout6-custom.js file located in the checkout configuration interface in the admin

file path link:

https:///{AccountName}.myvtex.com/admin/portal/#/sites/default/code/files/checkout6-custom.js

the application collects data from the user and the current navigation page and sends it in json format called insider_object, see examples of the structure and data collected by insider_object in different pages:

Home Page

Search/Category/Department Pages

Product Page

Cart Page

OrderPlaced Page

How it works in technical terms at VTEX

The app works based on VTEX Pixel events. These events are mapped in the “/react/index.ts” file, inside the “handleMessages” function, where whenever one of the events is triggered, the function will properly deal with the received data, setting up the insider_object according to the model of each page, so that the Insider script collects the data correctly.

For more detailed information, access this VTEX documentation: https://developers.vtex.com/docs/guides/vtex-io-documentation-6-listeningtostoreevents

Fired whenever the page is loaded. When the user is on the home page, responsible for adding the insider_object attribute:

Triggered whenever the department, category, or search page is loaded. Responsible for adding the attributes to the insider_object:

Fired whenever the any page is loaded. Responsible for adding the insider_object attribute:

In addition, it also triggers the event to reinitialize the “Insider” (init-manager:re-initialize)

Fired after page load. Responsible for fetching authenticated user information via API and adding the attribute to the insider_object:

If the user is not authenticated, the data added will be from a template.

Fired whenever a product is added to the cart. Responsible for adding the insider_object attribute:

this attribute contains information about the added product.

Fired whenever the product page is loaded. Responsible for adding the product and page information to the insider_object with the attributes:

Fired whenever the order placed page is executed. Responsible for adding the attributes to the insider_object:

In some cases of stores with the Insider app installed, it is necessary to customize certain specific components. If this is indeed required, you will also need to add custom events for VTEX to understand the data you are handling.

Add dependency on your manifest.json, like this:

How to import the VTEX hook:

Which function to use to send the event:

How to send the event and what information needs to be sent for each event:

If you need to create a custom add-to-cart button, you will need to add the following event:

We have two cases where it is necessary to call the 'productView' event on the product page, upon page load and when changing the product SKU. In both cases, it is necessary to send the event to VTEX.

• Page Load: If for any reason we have a completely customized page that would simulate a product page, add the event upon page load.

• Product SKU Change: If for any reason we have the 'sku-selector' block customized, add the event every time the page's SKU changes.

Event to add on VTEX pixel:

The data mentioned above that the app collects is the default data. However, now you have the ability to insert custom attributes into the insider_object.

The app exports the following JavaScript function into the window object:

The first argument is the subObject. The subObject supported is the same as as what Insider supports, as mentioned in the Insider documentation

Supported subObject are:

The second argument is the object of your custom properties. You can insert any object with any property and values here

So, if you want to add a custom attribute like whatsapp_optin to the user subObject and a custom attribute, you can do the following:

After doing that, your insider_object will look like this:

A new function has been added to the app and is available on the global window object as AddToCart. This function enables you to add a product directly to the cart programmatically.

Parameters SKU (string): The Stock Keeping Unit of the product. The SKU represents the physical unit and product variation, containing the unique characteristics that define the specific type of product.

Quantity (integer): The number of units of the product to be added to the cart.

Seller (string): The seller. In VTEX, products can be supplied by multiple sellers, making it important to specify the seller from which the product is sourced.

Note: This function is available only within the VTEX IO environment. For example, checkout pages are not built on VTEX IO, so the AddToCart function is not available there.