Track And Visualize Analytics with Appbase.io — Part #9 of 11

Published in

All things #search

4 min readSep 24, 2021

This is the 9th post for Movies store, Vue & Vuex E-commerce app tutorial series created by appbase.io. The final result of following this series is your own feature-rich, scalable movies store built with Vue and Vuex!

In this tutorial post, we’re going to add search, click and conversion analytics to a Vue e-commerce app, and visualize insights from it.

1. Getting Started with Vue and Nuxt.JS

2. Basics of Vue

3. Home Page + Layout + CSS-in-JS (Emotion.JS)

4. Basics of VueX

5. Appbase.io + ReactiveSearch UI Components

6. Building The Search Page

7. Authentication with Auth0

8. Product Page + Checkout Page + Payment with Stripe

9. Analytics with Appbase.io (→ You’re here!)

10. A. Deploying the Nuxt App with Heroku

10. B. Deploying the Nuxt App with Vercel

11. PWA (Progressive Web App) compatibility

In this post, we will be talking about these points:

Analytics with appbase.io: Overview
How to track user search, clicks and conversion analytics (aka signals)
How to visualize insights from these analytics

Getting Started

User analytics help you learn how users engage with your products, experiences, and campaigns so that you can make them better.

Step 1: Overview

Appbase.io’s Search Analytics enables businesses to analyze their search volume, conversion opportunities (popular searches), content gaps — in effect helping them understand the ROI impact of search and highlighting areas where it can be improved.

In this post, we are going to use analytics to measure the following:

Our user searches and total users
How many of these searches result in a click
How many of these clicks result in a conversion

Step2: Track Analytics

There are three types of analytics:

Search Analytics:

You can define the appbaseConfig prop in the ReactiveBase component to customize the analytics experience when appbase.io is used as a backend. It accepts an object which has the following properties:

recordAnalytics Boolean allows recording search analytics when set to true and appbase.io is used as a backend. Defaults to false.

<reactive-base
  :appbaseConfig="{
    recordAnalytics: true,
  }"
 ....
/>

searchStateHeader Boolean If true, then appbase.io will record the search state with every search request made from ReactiveSearch. Defaults to false.
You can look into the other properties in detail over here.

Click Analytics:

Click analytics have to be wired into the result components. Its supported in ReactiveList, however when using ReactiveList, the renderItem or render prop receives a method called triggerAnalytics to make click analytics work which you have to invoke with click.

<reactive-list>
    <div slot="renderItem" slot-scope="{ item,    triggerClickAnalytics}">
        <div onClick="triggerClickAnalytics">{{ item.title }}</div>
    </div>
</reactive-list>

When rendering your component using render you have to call the triggerAnalytics function by using the _click_id property of the result items as an argument. Example:

<reactive-list>
    <div slot="render" slot-scope="{ data, triggerClickAnalytics }">
        <div
            v-for="(item, index) in data"
            @click="triggerClickAnalytics(item._click_id)"
        >
            {{ item.title }}
        </div>
    </div>
</reactive-list>

Conversion Analytics:

Records the conversion event for a query or a query_id, query_id represents a search session recorded by Appbase which can be used to record clicks, conversion, filters and custom events in the same search session. we use PUT /:index/_analytics/conversion endpoint to record a conversion event.

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");var raw = JSON.stringify({
 "query_id": "e3840c97-dd30-4696-8781-f355f40dd0f4",
 "conversion_on": [
   "iphone_1234"
 ],
 "custom_events": {
   "user_segment_2": "free"
 }
});var requestOptions = {
 method: 'PUT',
 headers: myHeaders,
 body: raw,
 redirect: 'follow'
};fetch("http://{{USERNAME}}:{{PASSWORD}}@{{CLUSTER_URL}} /{{INDEX}}/_analytics/conversion", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));

We will call this api when a product is added to cart or successfully purchased. Here, we can send the search string in query or query_id. If we don’t have a search query then query is preferred over query_id , as query_id doesn’t accept empty string.

In conversion_on , we will send an array of productIds on which conversion event is called i.e product added to cart or successful purchase.

Device and browser information can be sent through custom_events along with the conversion_on in the body. Custom events can also be sent with the reactive-base component in the appbaseConfig:

<reactive-base
  :appbaseConfig="{
   recordAnalytics: true,
   customEvents: {
     device: YOUR_DEVICE_DETAILS,
     browser: YOUR_BROWSER_DETAILS,
   }
  }"
...
/>

Visualize analytics

All the clicks and conversion events can be tracked in the Analytic’s section of the dashboard. This displays a funnel of the total searches, clicks and the total conversion events.

All the custom events sent through the application can be tracked here. There are various filters using which we can analyze the conversions in a better way.

In this post, we learned how to track the user events in a nuxt application with the help of Appbase.io analytics. By using this, we can record plenty of interesting events like how many users clicked on a particular product, what products are directly bought by customers etc. This data can help the users to improve user experience and business ROI.

In the next tutorials, we will learn how to deploy our Nuxt.js app to Heroku or Vercel.

This entire tutorial series is available as an open-source Apache 2.0 project.

Checkout the codebase for this step over here: https://github.com/appbaseio-confidential/vue-moviestore/tree/step-8.

Or checkout the entire codebase for this app over here: https://github.com/appbaseio-apps/vue-moviestore.