Staging branch for CS team to work on tutorials

pages/_meta.json

@@ -3,11 +3,6 @@
         "title": "Docs",
         "type": "page"
     },
-    "tutorials": {
-        "title": "Tutorials",
-        "type": "page",
-        "display": "hidden"
-    },
     "changelogs": {
         "title": "Changelog",
         "type": "page",

pages/docs/_meta.json

@@ -3,5 +3,6 @@
 	"tracking": "Tracking",
 	"analysis": "Analysis",
 	"admin": "Admin",
+	"tutorials": "Tutorials",
 	"other-bits": "Other Bits"
 }

pages/docs/tutorials/_meta.json

@@ -0,0 +1,8 @@
+{
+    "setting-up-mixpanel": "Setting Up Mixpanel",
+    "analytics-strategy": "Analytics Strategy",
+    "creating-a-tracking-plan": "Creating a Tracking Plan",
+    "mixpanel-analysis": "How to use Mixpanel", 
+    "developers": "Mixpanel for Developers",
+    "migration-guides": "Migration Guides"
+}

pages/docs/tutorials/analytics-strategy.md

@@ -0,0 +1,2 @@
+## Overview
+Defining the right metrics to track product performance can be a challenging task for any business. Companies have different goals and unique products that require a customized approach to analytics. To help you define your metrics, we have crafted a framework that outlines the types of metrics, how to organize them, and the key categories to consider. In [How to Determine Your Goals And Metrics guide](https://help.mixpanel.com/hc/en-us/articles/360035109991), we will explore the focus metric, Level 1 and Level 2 metrics, and how to organize them to ensure each team understands how their metrics contribute to the overall product performance. 

pages/docs/tutorials/creating-a-tracking-plan.md

@@ -0,0 +1,33 @@
+## Creating a Tracking Plan
+
+### Utilise a Tracking Plan to Tie Key Goals to Events Tracked
+Mixpanel recommends creating a tracking plan based on the key business goals identified from your analytics strategy. It should: 
+
+- Be a centralized document that should serve as the source of truth on your Mixpanel implementation
+- Define your business goals / KPIs and analytics strategy metrics
+- Outline the events, event properties, and user profile properties aligned to your metrics
+- Be treated as a living and shared document that is continuously updated with any implementation changes
+- Include notes that are referenced across teams (product, marketing, data science, tech / dev teams, etc.)
+
+This will be important for team members who are involved in defining use cases to be implemented in Mixpanel as well as, tech teams involved in the actual implementation of the codes.
+
+### Tracking Plan Methodology
+Be intentional with your data. Prioritize the most critical data you'll need based on your analytics strategy and KPIs, then iterate. Tracking everything and anything your user can do in your product can lead to unnecessary development effort and unused data.
+
+#### Define and prioritize KPIs
+Define the top KPIs and metrics that will help measure success and inform decisions about your product.
+
+#### Map KPIs to User Flows
+Map each KPI / metric to the steps or actions that users take to influence each KPI / metric. For example, sign up flow will be important when measuring KPIs related to new user acquisition. Consider also the different paths that users can take to achieve the same outcomes.
+
+#### Translate Flows into Events / Properties
+Breakdown your user flows into events (actions) and properties (context of these actions) in your tracking plan. This will ensure that you have scoped out the data you need to achieve your KPIs / metrics in Mixpanel.
+
+Mixpanel provides the following templates for vertical-specific tracking plans:
+
+- [Retail and E-commerce](https://docs.google.com/spreadsheets/d/1Kyys37m_GEL79_1BKKEnU5KxK91NF04kY-L_bFfcfqE/edit#gid=1484002407)
+- [Media and Entertainment](https://docs.google.com/spreadsheets/d/1K9t53kJJjaBG36kCIbZn_qKjXR9Iy306zYZAqDrv_AM/edit?usp=sharing)
+- [SaaS](https://docs.google.com/spreadsheets/d/1A5wm5MKzRfSOZfUfCAg8YpePiz8Jn3Ar_u8KBo5lD6g/edit?usp=sharing)
+- [Financial Services](https://docs.google.com/spreadsheets/d/1oGv6vbIFiYbima9IX4ItpBJvuChs-zzh83MRt_dSPgg/edit?usp=sharing)
+
+You can also access a copy of a [blank Tracking Plan from here](https://docs.google.com/spreadsheets/d/1ZdOZ6TMtRPxy7qRxiLsvH9HWcHJM6nZydWKoThRxFKc/edit#gid=1641519238). Save a copy to your device to get started on your tracking plan.

pages/docs/tutorials/developers/_meta.json

@@ -0,0 +1,5 @@
+{
+    "mixpanel-for-developers-fundamentals": "Fundamentals",
+    "mixpanel-for-developers-implementation": "Implementation",
+    "mixpanel-for-developers-id-management": "Identity Management"
+}

pages/docs/tutorials/developers/mixpanel-for-developers-fundamentals.mdx

@@ -0,0 +1,74 @@
+## Tutorial Overview
+We've broken down the Mixpanel for Developers tutorial into a couple of different modules designed to help you understand events and properties in Mixpanel, understand the data types it supports and how to send events to Mixpanel and enrich user data that have been documented in your Tracking Plan.
+
+We will also explore Mixpanel’s ID management Solution for Product Managers and Analysts to identify visitors as they go from an anonymous state to a known state and even when visitors use different devices.
+
+## Mixpanel Data Model
+Mixpanel data is stored and isolated within a project. Mixpanel recommends tracking 1 product with multiple platforms (mobile, web, etc.) into one project, but create [separate projects for development and production](https://help.mixpanel.com/hc/en-us/articles/360001354886-Automatically-Separate-Development-Data).
+
+There may be [other factors where implementing separate projects](https://help.mixpanel.com/hc/en-us/articles/115004491683-When-To-Use-Multiple-Projects#factors-to-consider) is required, but do note that querying data across projects is not possible. Mixpanel supports a few different categories of data that can be used for analysis: events, user profiles, group profiles, and lookup tables. In data warehouse terminology, events make up the fact table while user profiles, group profiles, and lookup tables are dimension tables.
+
+<p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
+  <iframe src="https://www.loom.com/embed/fc9390690f1e4d84ab926dcf54914118" frameborder="0" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }} allowfullscreen></iframe>
+</p>
+
+### Property Types
+Properties are attributes that help you define the specifics of an **Event** or a **User.** 
+Mixpanel has many Properties defined in its Data Model.
+
+|Property Type|Description|
+|:--- |:---|
+|[Event Properties](https://help.mixpanel.com/hc/en-us/articles/360001355266)|Event Properties describes the events that are tracked within your product.|
+|[Super Properties](https://help.mixpanel.com/hc/en-us/articles/360001355266#super-properties-for-events)|Super Properties are a type of Event Property that you can initialise to automatically attach to every subsequent Event you’re tracking at client side.|
+|[User Profile Properties](https://help.mixpanel.com/hc/en-us/articles/115004708186)|User Profile Properties describe your users (they typically store current demographical information). User profiles are joined to events on `event.distinct_id = user_profile.distinct_id`.|
+|[Group Profile Properties](https://help.mixpanel.com/hc/en-us/articles/360025333632-Group-Analytics#group-profiles)|Group Profile Properties describe group level information (similar to User Profiles Properties at user level). With Mixpanel’s [Group Analytics](https://help.mixpanel.com/hc/en-us/articles/360025333632), multiple users can be grouped and behavioural data analysed at a customised group level (such as company, account). Group profiles are joined to events on your chosen group key. For example, if you create a new group key for `company_id` your events will be joined on `event.company_id = group_profile.company_id`.|
+|[Lookup Tables](https://help.mixpanel.com/hc/en-us/articles/360044139291-Lookup-tables)|Lookup Tables allow you to dynamically extend additional properties mapped to an exiting Event or User Property. For example, if you create a lookup table for "Songs" (with additional properties like `hash_tags`, `top_10`, `all_time_favorite`) and specify the mapped event property as `song_id`; you can use these additional properties when doing filtering or breakdowns for events that has `song_id` as an event property.|
+|[Default Properties](https://help.mixpanel.com/hc/en-us/articles/115004613766-What-properties-do-Mixpanel-s-libraries-store-by-default-)|Default Properties (for Events and User Profiles) are collected and populated with values automatically in Mixpanel. This can happen upon data ingestion or when using certain Mixpanel client-side SDKs. Typically, they have a dollar sign ($) or “mp_” as prefix to distinguish them from normal properties.|
+|Reserved Properties|Mixpanel reserves certain property names (for [Events](https://help.mixpanel.com/hc/en-us/articles/360001355266#reserved-properties-for-events) and [User Profiles](https://help.mixpanel.com/hc/en-us/articles/115004708186#reserved-properties-for-user-profiles)) for special use cases, and these may or may not be automatically populated with values. The purpose of such Reserved Properties are for processing (ie event time stamping) or for specific system features (eg: cohort exports). Examples: `time`, `$email`, `$phone`, `$name`, `$created`.|
+
+### Supported Data Types
+Mixpanel supports five [data types](https://help.mixpanel.com/hc/en-us/articles/115004547063) for properties: String, Numeric, Boolean, Date and List. By choosing the most suitable data type for your properties, you'd be able to apply a set of [operators](https://help.mixpanel.com/hc/en-us/articles/115004547063#data-type-operators) that are most relevant to your properties in Mixpanel reports, and this will give you richer insights about your data.
+
+**String**
+- Alphanumeric value e.g. Plan Type = "Free", Artist Name = "Bruno Mars"
+- String properties have a character limit of 255 bytes.
+- Mixpanel will treat any property value that doesn’t match any other data type as a String.
+
+**Numeric**
+- Numeric (integer or decimal) value e.g. Cost = 15.00, Quantity = 5
+- You can apply operators such as sum, median and percentile on numeric properties.
+
+**Boolean**
+- Mixpanel treats properties as boolean if the value is either the JSON constant `true` or `false` e.g. Favorited = true, Bookmarked = false.
+- On Mixpanel, you can typecast any non-boolean property to boolean,
+- "false", 0, null, undefined, and empty string will be typecasted to boolean `false`
+- "true" and any set value that is not 0 or empty string will be typecasted to boolean `true`
+
+**Date**
+- An ISO formatted date `YYYY-MM-DDTHH:MM:SS` in UTC e.g. Last Purchase = "2022-10-30T13:30:25", Last Login = "2022-10-29". Note that all timestamps need to be sent in UTC timezone in an ISO format.
+- Mixpanel treats unix timestamps as Numeric property, however, you can typecast it to Date data type.
+
+**List**
+- A list of values as a JSON array e.g Favourite Genres = ["Folk","Alternative"] or Favourite Numbers = [1,5,10.0]
+- Limits of a List property: Event Property = 8KB, User Profile Property = 256KB, Each item in the list: 255 bytes
+
+## Updating User Profile Properties
+Mixpanel user profile properties are mutable and they can be updated in a timely manner to reflect the latest state of the users.
+
+You can update user profile properties via [Mixpanel SDK](https://developer.mixpanel.com/docs/javascript#setting-profile-properties) or [Engage API](https://developer.mixpanel.com/reference/profile-set). The following are the operations supported in Mixpanel.
+
+**Setting profile property**
+- `$set` - Sets a profile property or update a profile property value.
+- `$set_once` - Sets a profile property only if they do not yet exist on Mixpanel. This ensures that the previous profile property value is not overwritten.
+
+**Updating numeric profile property**
+- `$add` - Increments or decrements a numeric profile property.
+
+**Updating list profile property**
+- `$union` - Merges a given list into a List profile property and it ensures there are no duplicate values in the profile property.
+- `$append` - Appends a value to the end of a List profile property.
+- `$remove` - Removes a value from a List profile property.
+
+**Removing profile properties**
+- `$unset` - Remove a profile property from the user profile
+- `$delete` - Remove all profile properties from the user profile.

pages/docs/tutorials/developers/mixpanel-for-developers-id-management.mdx

@@ -0,0 +1,51 @@
+## Overview
+
+This section provides details on implementing Mixpanel's Identity Management called Identity Merge (ID Merge for short). Note that the [Legacy Identity Management](https://help.mixpanel.com/hc/en-us/articles/115004497803-Identity-Management-Pre-Identity-Merge-Overview) is not covered in this section as Identity Merge is enabled by default for all new organizations since March 2020.
+
+<p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
+  <iframe src="https://www.loom.com/embed/01dcff45ee91473a9e6ddb1670fd6cba" frameborder="0" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }} allowfullscreen></iframe>
+</p>
+
+## Basic Concepts in ID Merge
+<p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
+  <iframe src="https://www.loom.com/embed/f8f0ee64496a402d83246b111cdd051c" frameborder="0" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }} allowfullscreen></iframe>
+</p>
+
+## ID Merge Implementation (using Client-side SDK)
+<p style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
+  <iframe src="https://www.loom.com/embed/9941b613dd044536ba1962ddb6a32ccd" frameborder="0" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }} allowfullscreen></iframe>
+</p>
+
+## ID Merge Implementation Best Practices
+#### Call mixpanel.identify upon a successful sign-up / login or when an app is re-opened in a logged in state
+By calling mixpanel.identify at these specific points in user journeys, you would be able to link the pre and post-login events to the same user on Mixpanel. Besides, calling mixpanel.identify when the users re-open the app in a logged in state ensures that all events in the session are tracked with the user's identifier such as user id.
+
+#### Track the unique identifier as a super property and user property to assist troubleshooting
+You can track the user's unique identifier as a [super property via mixpanel.register](https://developer.mixpanel.com/docs/javascript#super-properties) and [user property via mixpanel.people.set](https://developer.mixpanel.com/docs/javascript#setting-profile-properties) as soon as it is available in the app i.e. on a successful sign-up / login or when an app is re-opened in a logged in state.
+In the cases when ID Merge is not implemented properly, you can rely on these properties for troubleshooting purpose.
+
+#### Avoid creating profiles for anonymous users
+Avoid creating profiles for anonymous users. If possible, cache user profile properties updates in cookie or local storage and only send them to Mixpanel after the user is identified (ie logged-in state).
+
+#### QA your ID management implementation during development phase
+Here are a few things to look out for:
+- Ensure that cross-platform, pre and post-registration events are linked to the same user on Mixpanel.
+- Ensure that no duplicate profiles are created as the users go through the onboarding, registration, login and cross-platform user journey.
+- Ensure that all the user’s identifiers are stored in the same Identity Cluster and all their events are displayed on a single profile on Mixpanel.
+
+#### Keep a record of your ID management implementation
+We encourage you to document your implementation (or create a diagram of the implementation). This will come in handy when you need to re-implement this on a new platform or troubleshoot ID management issue.
+
+Read more about [ID Merge Implementation Best Practices](https://help.mixpanel.com/hc/en-us/articles/9648680824852)
+
+---
+
+## FAQs
+#### Is ID Merge retroactive?
+Yes, ID Merge is retroactive. During merging distinct IDs that are added to the same cluster will be considered as the same user going forward.
+
+#### There are two types of ID Merge?
+Yes, you can read more about the [difference between Original vs Simplified ID Merge](https://help.mixpanel.com/hc/en-us/articles/14383975110292) and for more details how each one works, see the links below:
+- [Getting Started with Original ID Merge](https://help.mixpanel.com/hc/en-us/articles/360041039771) (default for new projects)
+- [Getting Started with Simplified ID Merge](https://help.mixpanel.com/hc/en-us/articles/14377628688788)
+