Installing the AVARI Mapper
AVARI captures data using an ultra-lightweight integration; the AVARI Mapper.
The AVARI Mapper is a simple JavaScript tag placed on the front-end of your website to securely capture visitor behavior. It sits directly on your site, using a Google Tag Manager container tag - ensuring that your site’s performance is always the first priority. If you have another tag manager on-site, we’re happy to integrate with that.
Visitor behavior provides rich insight about intent. AVARI securely sends the browsing data, along with a brand’s content and product information, to AVARI Foresight (our recommendation engine) for further processing.
Table of Contents
Instructions for Shopify Shops
Step 1: Installing the Mapper in your theme.
Step 2: Installing the Mapper in your Checkout page
Instructions for Bigcommerce Shops
Step 1: Installing the Mapper in your theme.
To install the AVARI Mapper on your Shopify shop, simply follow these steps. If you’re not sure about what to do or if you have any questions, feel free to contact us support@avari.io.
Log in to your Shopify account and go to your Themes settings.
Click on ‘Customize theme’ for the theme you are using.
Next, click on ‘Edit HTML/CSS’ on the top right to access your code.
Now you have to choose which template to edit. Usually there is a parent layout that defines your header and some other things. Pasting the Mapper here ensures that it’s being added to all your pages. In the ‘Classic’ theme that’s ‘theme.liquid’.
This is where you can directly edit your code. Copy the entire Mapper, starting with ‘<!-- Google Tag Manager -->’ and ending with ‘<!-- End Google Tag Manager -->’. Look on the top half of your code for the </head> tag and paste the Mapper directly above it. Don’t forget to hit ‘Save’.
The result should look like this:
After saving your changes, go back to the dashboard and click ‘Settings’.
Next, go to your Checkout settings.
Scroll down until you reach the ‘Order Processing’ section.
Stop at ‘Additional content and scripts’ and use the box to paste the Mapper. Don’t forget to save your changes.
Your ‘Additional content and scripts’ settings should now look similar to this:
That’s it. You’ve successfully added the AVARI Mapper to your shop allowing you to capture your visitors’ browsing behavior and continuously improve your predictive product recommendations!
To install the AVARI Mapper on your Bigcommerce shop, simply follow these steps. If you’re not sure about what to do or if you have any questions, feel free to contact us at support@avari.io.
Log in to your Bigcommerce account and go to the ‘Design’ page.
Next, click on ‘Edit HTML/CSS’ in the ‘Current Theme’ section.
‘Design Mode’ will launch in a new browser tab, with the ‘default.html’ file loaded.
Click on the ‘HTMLHead.html’ file in the ‘Panels in Template’ section and the HTML file will load.
This is where you can directly edit your code.
Copy the entire Mapper, starting with ‘<!-- Google Tag Manager -->’ and ending with ‘<!-- End Google Tag Manager -->’ from the AVARI app.
Look at your code for the </head> tag and paste the Mapper directly above it. Don’t forget to Save your file.
The result should look like this:
That’s it. You’ve successfully added the AVARI Mapper to your shop allowing you to capture your visitors’ browsing behavior and continuously improve your predictive product recommendations!