Tag Your Users By Platform

Analytics tags let you view subsets of your analytics data. This lets you better understand your user’s behavior. Analytics tags are strings that you conditionally assign to specific searches. These strings identify an aspect of the searches that clarify the behavior of a specific group of users.

For example, suppose you want to see analytics data for desktop and mobile users separately. You can do this by adding desktop and mobile to analyticsTags.

This guide outlines the process step by step. It illustrates two ways of implementing analyticsTags: with InstantSearch and with the API clients.

Identifying your user’s device

Before you can assign the desktop or mobile analyticsTags to searches, you need to identify your user’s device. You can write a function that detects what device it’s running on, and returns “desktop” or “mobile” depending on what it finds:

1
2
3
4
5
const getPlatform = () => {
  const isMobile = ...
  // your logic to determine whether a user is on mobile or desktop
  return isMobile ? 'mobile' : 'desktop';
};

Fetching your user’s device makes more sense on the front end, which is why there are no back-end snippets. Note that this script is a naive implementation of how to detect a device, you shouldn’t use it in production.

Assigning an analytics tag to a search

Using InstantSearch

To set the user’s device at the beginning of their search session, you can add it to the searchParameters setting of your InstantSearch instance during initialization.

1
2
3
4
5
const platformTag = getPlatform();

instantsearch.widgets.configure({
  analyticsTags: [platformTag],
});

1
2
3
4
let platform = getPlatform()
let query = Query()
query.analyticsTags = [platform]
let searcher = SingleIndexSearcher(index: index, query: query)

1
2
3
4
5
6
7
8
val platform: String = getPlatform()
val query = query {
    analyticsTags {
        +platform
    }
}

val searcher = SearcherSingleIndex(index, query)

1
2
3
4
5
6
7
import { Configure } from 'react-instantsearch-dom';

const platformTag = getPlatform()

<Configure
  analyticsTags=[platformTag]
/>

1
2
3
4
5
6
7
8
9
<script>
export default {
  data() {
    return {
      platformTag: getPlatform(),
    };
  },
};
</script>

1
2
3
<ais-configure
  [searchParameters]="{ analyticsTags: [getPlatform()]}
</ais-configure>

Using an API client

You can also pass the user’s device using the API clients, by providing it as a search parameter whenever you call search on your index.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const index = client.initIndex('your_index_name');

const platformTag = getPlatform();

index.search(
  {
    query: 'query string',
    analyticsTags: platformTag
  },
  (err, { hits } = {}) => {
    if (err) throw err;

    console.log(hits);
  }
);

Viewing segmented analytics data

After you’ve implemented, tested, and released your app with desktop and mobile analyticsTags, you can start segmenting your new analytics data based on your user’s platform.

You can do this from the Analytics section of your Algolia dashboard. In the header of the Analytics tab you can find the Tags input field.

Once your users start making searches in your new search implementation, the desktop and mobile analyticsTags appear in the Tags field. If you select mobile, you only see analytics for searches with the mobile tag. This is true for all Analytics subsections.

Depending on your traffic, you may have to wait to get enough tagged data to start drawing meaningful conclusions.