All Collections
AI Smart Search
Implementation
AI Smart Search - how to implement the appearance and tracking of transactions on your own?
AI Smart Search - how to implement the appearance and tracking of transactions on your own?

From this article you will learn how to implement AI Smart Search appearance and tracking in your online shop.

M
Written by Martyna Woźniszczuk
Updated over a week ago

The first step necessary to implement the services provided by QuarticOn is access to the Customer Panel. You can create an account yourself or contact us to provide login credentials.

1. Insert the QuarticOn script

Attach the main personalised script to the page code. This script, in a non-personalised form, looks like this:

<script type="text/javascript">
(function() {
     var _qS = document.createElement('script');
     _qS.type = 'text/javascript';
     _qS.async = true;
     _qS.src = '//qjs.quartic.pl/qjs/Customer_ID.js';
    (document.getElementsByTagName('head')[0]||
     document.getElementsByTagName('body')[0]).appendChild(_qS);
})();
</script>

The correct code, generated especially for you, can be downloaded from the Customer Panel. You can find instructions on how to do this here.

2. Share with us your products

We need to collect all information about your products for the search to work properly.
The easiest and recommended way is to provide us with an XML file (so-called feed) containing the full catalog of products from the shop.

Add product feed

We currently support feed in the popular Google Merchant standard. If your shop allows you to generate such a file, download its URL and insert it in the QuarticOn administration panel. Detailed information on entering the feed into the system can be found here.

Attention! Remember to select Quartic XML (AWS S3 / Lambda) as the directory format.

Supporting product variants

If you want to group variants of the same product, you need to create product groups in the <g: item_group_id> tag.

According to Google Merchant specification: item_goup_id: ID of a group of products that come in different versions (variants). Provide the same value for each product in the same product group. For example, if the product differs in size or color, enter the values ​​for the size [size] and color [color] attributes for all products that have the same value for the product group id [item_ group_ id] attribute.

Important! If you use product grouping, you must provide the item_group_id tag also for products that do not have variants. The item_group_id value for such variants should be equal to the product id.

Important! If you want to use tags that contain optional information (e.g. colour, labels, margins, sizes, etc.), please add these tags to the feed and let us know.

Implementation example

<item>
 <g:id>1234</g:id>
 <g:title>My product name</g:title>
 <g:status>1</g:status>
 <g:price>12.99</g:price>
 <g:price_old>20.49</g:price_old>
 <g:link>https://mydomain.com/my-product-link/</g:link>
 <g:image>https://static.mydomain.com/my-product-image.png</g:image>
 <g:product_type>Category 1 > Category 1.1 > Category 1.1.1</g:categories>
 <g:item_group_id>123456789</g:item_group_id>
 <g:color>red</g:color>
 <g:size>L</g:size>
</item>

3. Enter transaction tracking (recommended)

Thanks to transaction tracking, you get additional information on the effectiveness of website search. In the customer panel we will show you which phrases and which products generate:

  • best conversion,

  • the most numerous sales,

  • top sales

from search.

On the thank you page, add the following script to the page code. We add changes at the end of the <body> </body> section:

<script type="text/javascript">
    var upsParams = upsParams || [];
    upsParams.push(['transaction', 'SCRIPT_TRANSACTION_ID']);
    upsParams.push(['user','SCRIPT_USER_ID']);
    /* SCRIPT_LOOP_START*/
        upsParams.push(['action','purchase']);
        upsParams.push(['product','SCRIPT_PRODUCT_ID']);
        upsParams.push(['price','SCRIPT_PRICE']);
        upsParams.push(['quantity','SCRIPT_QUANTITY']);
        upsParams.push(['execute']);
    /* SCRIPT_LOOP_END */
</script>

The script collects and processes the following dynamic variables:

  • transaction – the unique ID of the transaction registered in the shop,

  • user – the ID of the user who made a purchase; if the user is not logged in, pass the empty value (upsParams.push(['user', '']);),

  • product – a unique product ID that matches the ID provided in the product tag,

  • price – the price of the product,

  • quantity – the number of product pieces.

To ensure the script works correctly, the appropriate variables must be passed:

  1. SCRIPT_TRANSACTION_ID – unique transaction ID

  2. SCRIPT_USER_ID – specifying the variable is optional; if user_id is available after logging into the shop as a customer, insert it here, if not, leave the string empty

  3. /* SCRIPT_LOOP_START */ – here you need to create a loop that will jump over all purchased products and extract the following data from them: SCRIPT_PRODUCT_ID – unique product ID, must match the catalog data; SCRIPT_PRICE – unit price of the product; SCRIPT_QUANTITY – the number of purchased pieces of a given product

  4. /* SCRIPT_LOOP_END */ – end of the loop

Important! Product ID consistency throughout the shop is the foundation of analytics quality. Therefore, the product ID should be unambiguous and unique, assigned to only one product. A given product should have a consistent ID or group_id in both the shop and the feed.

4. Provide us with the necessary information for the functioning of the search engine

Complete the form provided by our Success or Sales Advisor.

5. Check a search engine in preview mode

Contact QuarticOn and tell us that the place for the search engine is ready. Then, we will provide you with information on how to test the search engine and you will be able, for example, to adapt its visualisation to your needs.

You can style it according to the guidelines from the point below: Customise the visualization (optional).

6. Customise the visualisation (optional)

Our search engine goes to you along with the default template. However, if you want, you can customise the appearance of individual elements to your needs.

To do this, override CSS styles for selected classes describing search engine pieces. Below, for your convenience, you will find a list of elements forming individual parts of the search engine together with HTML code.

Main elements

The search engine consists of two basic elements that are divided into smaller parts.

  • Onfocus container – the container that appears under the search box, right after clicking on it, before the user starts typing the search phrase and before it exceeds 3 characters. It consists of a:

    a. search result field with a button

    b. section with popular phrases and predefined phrases/filters

    c. loader

    d. section with top product (optional)

    e. section with popular products

  • Autocomplete container – so-called small search engine which we most often place in the header of the page. After the user enters 3 characters of the phrase, it appears in the place of the onfocus container. It contains hints and products popular for the entered phrase. It consists of a:

    a. search result field with a button

    b. section with autocompleted phrases

    c. loader

    d. section with Bestseller for the search phrase (optional)

    e. sections with products matched to the search

  • Search result container – (SERP) search engine result page. It consists of a:

    a. headline with information about the searched phrase and the number of results
    ​b. sidebar to narrow down your search results (filters)
    ​c. search result lists with pagination and sorting options

Customising the look

Below you will find containers with HTML classes that will help you locate the most important modules of the AI ​​Smart Search product on the website. These containers, along with their contents, can be styled as desired.

Attention! You can change or overwrite any css styles as you like. If you want to change HTML from the default in one of the modules, e.g. add a wrapper with labels in a product container, contact us.

Search engine container

  • <div class="qon-tiny-smart-search"> -> container for AI Smart Search modules

  • <div class="autocomplete-search-container"> -> container for the input and the search button

  • <div class="loader-container"> -> container for a loader

  • <div class=”qon-on-focus”> -> container for an onfocus module

  • <div class="results-container"> -> container for an autocomplete module

SERP containers

  • <section class=”qon-smart-search search has-results”> -> container in which the SERP module is placed

  • <h1 class=”result-header”> -> container in which the search results section header is placed

  • <aside class=”qon-filters-wrapper”> -> container in which the search result filters are placed

  • <div class=”qon-results-container”> -> container with a select button for sorting and listing all products that were found

The default template style sheet can be found here:

https://cdn.quartic.com.pl/styles/css/normalize.css.

Attention! In order to overwrite default styles, place the link <link> tag with the new styles inside the <head> tag below the <link> tag which contains href default styles.

The template structure is fixed for the mobile and desktop versions, and adaptation to different sizes of devices is based on @media queries.

7. Start off!

At this stage, we are ready to start. Contact QuarticOn and confirm that we can enable Smart Search for all users of your e-shop.

8. Go to the panel: analyse the results, add synonyms

Log in to: https://cp.quarticon.com/qonpanel/login/?selectLang=en

Analytics

In the Customer Panel, you can not only track search engine results, e.g. the number of searches, the most popular phrases and products. Thanks to CTR, conversion and sales data, you can easily draw conclusions and optimise the marketing activities of your shop (e.g. advertising campaigns, remarketing). Data are presented broken down into searches with autocomplete and SERP in any time range.

On the main screen, you will find charts:

  • number of searches;

  • most popular phrases;

  • autocomplete vs SERP;

  • phrases with the highest sales;

  • phrases without results;

  • phrases with the most sales;

  • most frequently clicked phrases.

In the phrase report, you will find:

  • phrase CTR,

  • conversion,

  • number of performed transactions, as well as the volume and value of search sales.

The product report includes:

  • the number of views, clicks, CTR and conversion of each product that was found in the search results,

  • the number of transactions carried out, as well as the volume and value of product sales.

Synonyms

Thanks to the phrase synonymisation function, you will quickly increase the search efficiency in your shop.

How to use it? If you see frequent repetitive phrases in search statistics that have no results, add a synonym for them. E.g. users search for the phrase "pendant", meanwhile, all pendants in your shop have the professional name "necklace" in the product name. "Pendant" gives zero results in the search engine. Just add a new synonym, enter "pendant" as the base word and "necklace" as a synonym.

From now on typing "pendant" in the search engine will return search results for "necklace" revealing the full range of your products to users.

9. Start AI Smart Search

The user searches and you view their activities in the Customer Panel and optimise your shop based on this data.

Did this answer your question?