Now that we have successfully set up event listening, our next objective is to gain insights into the live number of views for each product page in our store whenever an event is triggered.
To achieve this, we will implement a custom client with analytics capabilities. This client will be responsible for retrieving information about a product's number of views from mocked data.
In VTEX IO, a client is responsible for establishing connections with external APIs and other VTEX services. The Analytics client, which will be developed in this step, will execute a REST request, fetching valuable information about product views.
Developing a custom client
Navigate to the service-course-template/node/clients/analytics.ts file. This is where the Analytics client will be implemented. Observe that the Analytics client extends the AppClient class from the @vtex/api package, ensuring secure communication configurations within your app.
Defining a constructor
The client includes a constructor, a special method invoked when an object is instantiated from a class. Its primary purpose is to initialize the object's properties and perform any necessary setup, ensuring that the Analytics client can interact effectively with other parts of the app and the vtex.mocked-analytics app.
The
vtex.mocked-analyticsapp provides mocked live products data via the/_v/live-productsendpoint.
Implementing the client's method
Proceed to implement the getLiveUsers method, responsible for making an HTTP GET request to the _v/live-products endpoint. This method returns a promise for fetching an array, with each element of type LiveUsersProduct - an object containing slug (product ID) and liveUsers (quantity of users viewing the product).
Exporting the custom client
Expose the custom client by extending the default Clients implementation. Open the node/clients/index.ts file, import the analytics client, and update the Clients class as highlighted.
Using the custom client
Defining the handler function
With our new analytics client, let's update its handler function to display the output of the analytics client's getLiveUsers method. Go to the node/handlers/analytics.ts file and replace the content of ctx.body with the method developed in the previous steps (ctx.analytics.getLiveUsers()).
Defining the service route
Go to the node/service.json file, and define a public route named analytics with the path /_v/app/analytics/realTime.
Relating a route to a handler
Update the node/index.ts file to relate a route to a handler. Note that the routes section associates the analytics route with the analytics handler function. The GET method is associated with the analytics handler.
Therefore, when a GET request is made to the analytics route previously defined, it triggers the analytics handler function, which, in turn, executes the getLiveUsers() method of the Analytics client, providing real-time insights into product views.
Linking the app
To test the Analytics client, link your app using vtex link. Then, use Postman or curl to send a GET request to the designated route, replacing {workspace} with your workspace name and {accountName} with your VTEX account name.
The request should return status 200 OK and data in the same format as the example in the right.
Developing a custom client
Navigate to the service-course-template/node/clients/analytics.ts file. This is where the Analytics client will be implemented. Observe that the Analytics client extends the AppClient class from the @vtex/api package, ensuring secure communication configurations within your app.
Defining a constructor
The client includes a constructor, a special method invoked when an object is instantiated from a class. Its primary purpose is to initialize the object's properties and perform any necessary setup, ensuring that the Analytics client can interact effectively with other parts of the app and the vtex.mocked-analytics app.
The
vtex.mocked-analyticsapp provides mocked live products data via the/_v/live-productsendpoint.
Implementing the client's method
Proceed to implement the getLiveUsers method, responsible for making an HTTP GET request to the _v/live-products endpoint. This method returns a promise for fetching an array, with each element of type LiveUsersProduct - an object containing slug (product ID) and liveUsers (quantity of users viewing the product).
Exporting the custom client
Expose the custom client by extending the default Clients implementation. Open the node/clients/index.ts file, import the analytics client, and update the Clients class as highlighted.
Using the custom client
Defining the handler function
With our new analytics client, let's update its handler function to display the output of the analytics client's getLiveUsers method. Go to the node/handlers/analytics.ts file and replace the content of ctx.body with the method developed in the previous steps (ctx.analytics.getLiveUsers()).
Defining the service route
Go to the node/service.json file, and define a public route named analytics with the path /_v/app/analytics/realTime.
Relating a route to a handler
Update the node/index.ts file to relate a route to a handler. Note that the routes section associates the analytics route with the analytics handler function. The GET method is associated with the analytics handler.
Therefore, when a GET request is made to the analytics route previously defined, it triggers the analytics handler function, which, in turn, executes the getLiveUsers() method of the Analytics client, providing real-time insights into product views.
Linking the app
To test the Analytics client, link your app using vtex link. Then, use Postman or curl to send a GET request to the designated route, replacing {workspace} with your workspace name and {accountName} with your VTEX account name.
The request should return status 200 OK and data in the same format as the example in the right.