diff --git a/apps/blog/src/pages/zipper-analytics.mdx b/apps/blog/src/pages/zipper-analytics.mdx new file mode 100644 index 000000000..e7f8a34a5 --- /dev/null +++ b/apps/blog/src/pages/zipper-analytics.mdx @@ -0,0 +1,215 @@ +--- +title: Effortless User Tracking with Zipper Analytics +date: 2023/09/18 +description: Integrate Zipper Analytics seamlessly for user identification, activity tracking, and personalized Slack alerts. +tag: api, productivity, slack +author: Matheus Littig +summary: | + Learn to effortlessly integrate Zipper Analytics for precise user tracking and actionable insights in your product. +--- + +Analytics is one of the most crucial integrations you can establish to ensure that your product reaches its intended audience and is utilized as planned. However, there are instances where a simple solution is needed to track and provide valuable insights into user interactions with our product. + +With this in mind, we are excited to introduce our [Analytics Applet](https://zipper-analytics.zipper.run), featuring key functions: + +- User identification +- Tracking user activities through events +- Company identification +- Sending Slack alerts for events executed by identified users + +Zipper seamlessly manages this solution with end-to-end resources, incorporating connectors for various API providers (Slack, Discord, OpenAI, Notion, etc.) and a comprehensive internal storage system for applets, based on key/value attributes. + +For this specific applet, we leverage Zipper Storage to handle user, company, and event storage, and utilize the Slack Connector to send personalized alerts to our dedicated Slack workspace. + +Before we start to integrate Zipper Analytics into our product's codebase, we need first follow some steps. + +### Setting Up Slack Bot + +1. Fork the Zipper Analytics to your desired workspace +2. Create a new Slack app: + 1. Visit [Slack API apps](https://api.slack.com/apps) + 2. Choose "Create New App" and select "From an App Manifest.” + 3. Paste the provided JSON object: + + ```json + { + "display_information": { + "name": "Zipper Analytics" + }, + "features": { + "bot_user": { + "display_name": "Zipper Analytics", + "always_online": false + } + }, + "oauth_config": { + "redirect_urls": [ + "https://zipper.dev/connectors/slack/auth" + ], + "scopes": { + "bot": [ + "channels:history", + "channels:join", + "chat:write", + "chat:write.public", + "channels:read" + ] + } + }, + "settings": { + "org_deploy_enabled": false, + "socket_mode_enabled": false, + "token_rotation_enabled": false + } + } + ``` + +3. Obtain app credentials + 1. In the Slack app, go to the *Basic Information* menu. + 2. Retrieve the **Client ID** and **Client Secret.** +4. Configure Slack Connector: + 1. Paste the **Client ID** and **Client Secret** into `slack-connector.ts`. + 2. Configure bot-scopes as specified in the app manifest. + 3. Click on **Save and Install.** + +Once the bot is installed in the desired Slack channel, we're all set to start to integrate analytics to our codebase. + +### Idetifying and Tracking + +To showcase how easily you can integrate Zipper's applet API calls into your Codespace, we've developed a straightforward React project on [CodeSandbox](https://codesandbox.io/s/zipper-analytics-93423k). This project includes the following objects: + + +```jsx +/** +* The `identify` and `tracking` keys are analogs +* to it files in analytics applets and their inputs. +*/ +const ANALYTICS_URL = (route) => + `https://zipper-analytics.zipper.run/${route}.ts/relay`; + +const analytics = { + identify: async (email, company_name) => { + await fetch(ANALYTICS_URL("identify"), { + method: "POST", + body: JSON.stringify({ + email, + company_name + }) + }); + }, + + track: async (event_name, props) => { + await fetch(ANALYTICS_URL("track"), { + method: "POST", + body: JSON.stringify({ + event_name, + props + }) + }); + } +}; +``` + +With this setup, our application can invoke these methods in the callback action as follows: + +```jsx +export default function App() { + const [loading, setLoading] = useState(""); + + const authenticatedUser = { + name: "Ibu Madha", + email: "ibu@zipper.works", + company: "Zipper" + }; + + const onCreateApplet = async () => { + try { + setLoading("Loading..."); + + await analytics.identify(authedUser.email, authedUser.company); + await analytics.track("Created an Applet", { + email: authedUser.email + }); + + setLoading("Finished!"); + + setTimeout(() => { + setLoading(""); + }, 1000); + + return console.log("Action tracked"); + } catch (err) { + return console.error(err); + } + }; + + return ( +
{loading}
+{loading}
+