Add an analytics extension in Appmaker
Overview
This tutorial shows you how to create an analytics extension. You can use this extension to track user behavior in appmaker made apps. And also if you have to track any custom events, you can use this extension to track those events. And also this can be usefull to send targeted push notifications to your users.
Prerequisites
Follow this doc to create a new extension
After creating an extension go to
packages/<extension-name>/src/index.js
.Add the following code inside the index.js file.
import { activateEvents } from './events';
import { configureAnalytics } from './lib';
- Inside the activate function add the following code.
export function activate({settings}) { // settings is the configuration object from the appmaker dashboard if any. You can use this to configure your extension if needed.
configureAnalytics(settings); // this is the function to configure your analytics library. You can use this to configure your analytics library if needed.
activateEvents(settings);
}
5. Now go to src/events.js
and add the following code.
import { shopifyIdHelper } from '@appmaker-xyz/shopify';
import { analytics } from '@appmaker-xyz/core';
import { recordEvent, analyticsSetProfile, setPageView } from './lib';
const activateEvents = (settings) => {
const sendAddToCart = (params, context) => {
console.log('params', params); // here you will get seggregated data for this particular event.
console.log('context', context); // here you will get the whole data that will be available for this event
recordEvent(
'add_to_cart', // this is the event name. You can change it according to your need.
{
'Product URL': context.product.onlineStoreUrl, // In this 'Product URL' is the event attributes name which can be modified according to your need.
'Product Title': params.item_name,
'Currency': params.currency,
'Product ID': shopifyIdHelper(params.item_id, true), // shopifyIdHelper is a helper function to get the shopify id number 1234567890 from the gid://shopify/Product/1234567890 format.
'Product Price': parseInt(params.price, 10),
'Variation ID': shopifyIdHelper(params.variant_id, true),
}, // these are the event properties which can be modified according to your need.
context, // context should be passed as it is
);
};
// Like the above function you can add more functions for other events. For example, if you want to track remove from cart event, you can add the following code.
const sendRemoveFromCart = (params, context) => {
recordEvent(
'remove_from_cart',
{
'Product URL': context.product.onlineStoreUrl,
'Product Title': params.item_name,
'Currency': params.currency,
'Product ID': shopifyIdHelper(params.item_id, true),
'Product Price': parseInt(params.price, 10),
'Variation ID': shopifyIdHelper(params.variant_id, true),
},
context,
);
};
analytics.onTrack((event, params, context) => {
switch (event) {
case 'product_added_to_cart':
sendAddToCart(params, context);
break;
case 'remove_from_cart':
sendRemoveCart(params, context);
break;
// you can add more events here
default:
break;
}
}, 'your-extension-name');
analytics.onIdentify((userId, params, context) => {
analyticsSetProfile(params, context);
});
analytics.onPageTrack((id, name, context) => {
setPageView(name)
}, 'your-extension-name');
};
export { activateEvents };
6. For adding more events that are available from the app, you can refer to this doc https://developer-docs.appmaker.xyz/docs/analytics/appmaker-analytics-events/.
7. create a lib.js
file inside the src
folder and add the following code. This is a helper file to send the data to your analytics library.
import {
sendEventsFunction,
setUserProfileFunction,
setPageViewTrackFunction
} from 'your-analytics-library'; // replace these with the analytics of yours and also replace the function names with the functions that you have in your analytics library. Also use the same function names in the following code.
import { appmaker } from '@appmaker-xyz/core';
const recordEvent = (eventName, params, eventObject) => {
const async yourExtensionData = await appmaker.applyFilters('yourExtensionNameData', {
eventName,
params,
eventObject,
}); // it is important to use this filter to get the data from the app. Then only the apps can use custom event name and event properties to the event from their theme.
sendEventsFunction(yourExtensionData.eventName, yourExtensionData.params);
};
const analyticsSetProfile = (params, context) => {
console.log('params', params); // you will get the user details here. This will be useful to track the current user. This will be triggered when the user logs in or signs up.
setUserProfileFunction(params);
};
const setPageView = (pageName) => {
setPageViewTrackFunction(pageName);
};
const configureAnalytics = (settings) => {
// configure your analytics library here
};
export {
recordEvent,
analyticsSetProfile,
setPageView,
configureAnalytics,
};