Integrations / Platforms / Shopify / Click-Through and Conversion Analytics

Click-Through and Conversion Analytics

The Algolia for Shopify plugin has out-of-the-box support for click-through analytics, and with some minor development effort, it’s possible to track conversions too.

Prerequisite

Your Algolia plan must include Click and Conversion Analytics to track these events in your Shopify store. Please refer to the pricing page for more details.

This guide assumes you use the default widgets the extension provides. If that’s not the case, you have to manually implement Click and Conversion Analytics.

Click-through analytics

To enable click-through analytics, all you have to do is tick the “Use click analytics” checkbox found in the Settings tab of your Shopify admin, and click “Save”.

The Analytics section in the Shopify admin

Conversion analytics

To start tracking conversions, please make sure to:

  1. Enable Click Analytics.
  2. Uncomment calls to the saveForConversionTracking method in your algolia_instant_search.js.liquid and algolia_autocomplete.js.liquid files.
  3. Add this code in the Additional scripts section of your Shopify Admin interface :
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<script>
  // Load the Algolia search-insights library.

  var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights@1.6.2";

  !function(e,a,t,n,s,i,c){e.AlgoliaAnalyticsObject=s,e[s]=e[s]||function(){
  (e[s].queue=e[s].queue||[]).push(arguments)},i=a.createElement(t),c=a.getElementsByTagName(t)[0],
  i.async=1,i.src=n,c.parentNode.insertBefore(i,c)
  }(window,document,"script",ALGOLIA_INSIGHTS_SRC,"aa");

  // Initialize the insights client.

  aa('init', {
    appId: 'YOUR_APP_ID',
    apiKey: 'YOUR_SEARCH_API_KEY'
  });
  /**
    * Try to get the details from local storage for conversion tracking.
    * We're using a try...catch here to handle any possible exceptions resulting
    * from local storage or JSON parsing.
  */
  function trackConversion() {
    const localStorageKey = 'algolia_analytics_clicked_objects';

    try {
      // Get any previously stored data.
      const previousClickItemsString = localStorage.getItem(localStorageKey);
      // If data was found, send a conversion event for those products.
      if (!!previousClickItemsString) {
        const previousClickItems = JSON.parse(previousClickItemsString);
        previousClickItems.forEach(data => {
          aa('convertedObjectIDsAfterSearch', data);
        });
      }
    } catch (error) {
      // No need to do anything in this scenario.
    }

    // Try to remove the items from local storage.
    try {
      localStorage.removeItem(localStorageKey);
    } catch (error) {
      // No need to do anything in this scenario.
    }
  }
  trackConversion()
</script>

You must replace YOUR_APP_ID and YOUR_SEARCH_API_KEY in the script with your Algolia application credentials.

Widget updates

The latest versions of our widgets include the code that’s required to support conversion tracking. More specifically, the algolia_analytics.js.liquid now contains the following method:

  • saveForConversionTracking This method saves details in localStorage about objects that were clicked from the search results.

The algolia_instant_search.js.liquid and algolia_autocomplete.js.liquid have been updated to include calls to saveForConversionTracking, but these are commented out by default. To enable conversion tracking, you have to uncomment these lines for your store.

algolia_analytics.js.liquid

The algolia_analytics.js.liquid file contains the following updates:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

@@ -9,4 +9,68 @@
     appId: algolia.config.app_id,
     apiKey: algolia.config.search_api_key,
   });
+
+  const localStorageKey = 'algolia_analytics_clicked_objects';
+
+  /**
+   * Saves details in local storage for conversion tracking
+   */
+  algolia.saveForConversionTracking = function (data) {
+    /**
+     * We're using a try, catch here to handle any possible exceptions
+     * resulting from local storage or JSON parsing.
+     */
+    try {
+      // Get any data previously stored
+      const previousClickItemsString = localStorage.getItem(localStorageKey) || '[]';
+      const previousClickItems = JSON.parse(previousClickItemsString);
+
+      var conversionData = data;
+
+      // Changing the event to 'convert' from 'click'
+      conversionData.eventName = 'convert';
+      // Removing the `positions` property
+      delete conversionData.positions;
+
+      // Add the current products data to local storage
+      previousClickItems.push(conversionData)
+      localStorage.setItem(localStorageKey, JSON.stringify(previousClickItems))
+    } catch (error) {
+      // No need to do anything in this scenario
+    }
+  };
 })(window.algoliaShopify);

algolia_autocomplete.js.liquid

The algolia_autocomplete.js.liquid file contains the following updates:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

@@ -280,13 +280,21 @@
   // Event listeners
   autocompleteInstance.on('autocomplete:selected', function(obj, datum, name) {
     if (algolia.config.analytics_enabled) {
-      aa.clickedObjectIDsAfterSearch({
+      var clickData = {
         index: datum._index,
         eventName: 'click',
         queryID: datum._queryID,
         objectIDs: [datum.objectID],
         positions: [datum._position],
-      });
+      };
+
+      // Send the click event
+      aa.clickedObjectIDsAfterSearch(clickData);
+      /**
+       * Uncomment the following function call to start storing data in
+       * local storage for conversion tracking
+       */
+      // algolia.saveForConversionTracking(clickData);
     }
     switch (name) {
       case 'products': {

algolia_instant_search.js.liquid

The algolia_instant_search.js.liquid file contains the following updates:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

@@ -617,13 +617,21 @@
             link += '?variant=' + variant_id;
           }
           if (algolia.config.analytics_enabled) {
-            aa.clickedObjectIDsAfterSearch({
+            var clickData = {
               index: hit.dataset.algoliaIndex,
               eventName: 'click',
               queryID: hit.dataset.algoliaQueryid,
               objectIDs: [hit.dataset.algoliaObjectid],
               positions: [Number(hit.dataset.algoliaPosition)],
-            });
+            };
+
+            // Send the click event
+            aa.clickedObjectIDsAfterSearch(clickData);
+            /**
+             * Uncomment the following function call to start storing data in
+             * local storage for conversion tracking
+             */
+            // algolia.saveForConversionTracking(clickData);
           }
           window.location.href = link;
         });

Further improvements

The current conversion tracking assumes that every clicked product (and sent to saveForConversionTracking) is bought during checkout. This behavior can be improved by sending the conversion event for only those products that were in the cart.

Previous
Shopify Flow

Did you find this page helpful?