Add documentation for Javascript SDK

This adds a number of new documents related to instructions for the JavaScript SDK. each has usage and installation docs. I also updated the routing for the menu so they are available.
uptech · Apr 19, 2024 · 5647275 · 5647275
1 parent 7a0a6db
commit 5647275
Show file tree

Hide file tree

Showing 11 changed files with 274 additions and 0 deletions.
diff --git a/docs/browser/index.md b/docs/browser/index.md
@@ -0,0 +1,7 @@
+# AppFit for the Browser
+
+The Flutter SDK allows you to drop-in analytic tracking, direct to your AppFit project.
+
+## Getting Started
+
+Before you can start tracking events, you have to grab your API Key from your AppFit Dashboard
diff --git a/docs/browser/web-apps/index.md b/docs/browser/web-apps/index.md
@@ -0,0 +1,7 @@
+# AppFit for the Browser
+
+The AppFit Browser SDK allows you to drop-in analytic tracking, direct to your AppFit project.
+
+## Getting Started
+
+Before you can start tracking events, you have to grab your API Key from your AppFit Dashboard
diff --git a/docs/browser/web-apps/installation.md b/docs/browser/web-apps/installation.md
@@ -0,0 +1,21 @@
+# AppFit for JavaScript
+
+The JavaScript SDK allows you to drop-in analytic tracking, direct to your AppFit project.
+
+## Installation
+
+Install the SDK using NPM or Yarn.
+
+=== "NPM"
+    ```shell
+    npm install @uptechworks/appfit-browser-sdk
+    ```
+
+=== "Yarn"
+    ```shell
+    yarn add @uptechworks/appfit-browser-sdk
+    ```
+
+---
+
+The AppFit SDK is Open Source. Find it on [GitHub here](https://github.com/uptech/appfit-javascript-sdk)
diff --git a/docs/browser/web-apps/usage.md b/docs/browser/web-apps/usage.md
@@ -0,0 +1,55 @@
+# Usage
+
+## Configuration & Tracking
+
+To configure the AppFit SDK, simply construct an `AppFitBrowserConfiguration` class and insert your API Key.
+
+Your API Key can be obtained from your AppFit Dashboard.
+
+```javascript
+const appFitConfig = new AppFitBrowserConfiguration('API_KEY');
+```
+
+This configuration should be passed to a new `AppFit` client:
+```javascript
+const appFitClient = new AppFit(appFitConfig);
+```
+
+Once you have the client constructed, tracking an event is as simple as calling `trackEvent`.
+
+A full example can be found below.
+
+```javascript
+import {
+  AppFit,
+  AppFitBrowserConfiguration,
+} from '@uptechworks/appfit-browser-sdk';
+
+// Create the AppFitBrowserConfiguration
+const config = new AppFitBrowserConfiguration("API_KEY");
+
+// Create the AppFit Client
+const appFitClient = new AppFit(config);
+
+// Use the client to track events
+await appFitClient.trackEvent("event_name", { example: 'property' });
+```
+
+## Identifying Users
+
+The AppFit SDK includes an identify call that you can use to identify users in your analytic events.
+This method supports any String-based identifier.
+
+```javascript
+appFitClient.identifyUser("USER_ID");
+```
+
+Leaving out the user ID will remove all future events from including the id.
+
+```javascript
+appFitClient.identifyUser();
+```
+
+## Cached Events
+
+We cache all events locally in the SDK. This allows us to retry failed events. If a device is experiencing network issues, we will retry the saved events later to help avoid losing any metrics.
diff --git a/docs/browser/web-pages/index.md b/docs/browser/web-pages/index.md
@@ -0,0 +1,7 @@
+# AppFit for the Browser
+
+The JavaScript SDK allows you to drop-in analytic tracking, direct to your AppFit project.
+
+## Getting Started
+
+Before you can start tracking events, you have to grab your API Key from your AppFit Dashboard
diff --git a/docs/browser/web-pages/installation.md b/docs/browser/web-pages/installation.md
@@ -0,0 +1,64 @@
+# AppFit for JavaScript
+
+The JavaScript SDK allows you to drop-in analytic tracking, direct to your AppFit project.
+
+## How to install
+
+1. Install AppFit by pasting the following `<script>` tag into your webpage between the `<head>` tags.
+
+    ```html
+    <script>
+    window.AppFit={cache:{},trackEvent:(e,t)=>(window.AppFit.cache||(window.AppFit.cache={}),window.AppFit.cache.events||(window.AppFit.cache.events=[]),window.AppFit.cache.events.push({eventName:e,payload:t}),Promise.resolve()),identifyUser(e){window.AppFit.cache||(window.AppFit.cache={}),window.AppFit.cache.identity=e}},window.startAppFit=e=>{window.AppFit.apiKey=e;var t=document.createElement("script");t.type="module",t.src="https://d1433kipn7zjh1.cloudfront.net/appfit.js";var p=document.createElement("script");p.noModule=!0,p.src="https://d1433kipn7zjh1.cloudfront.net/appfit-legacy.js";var i=document.getElementsByTagName("script")[0];i.parentNode.insertBefore(t,i),i.parentNode.insertBefore(p,i)},
+
+    window.startAppFit("YOUR_WRITE_KEY");
+    </script>
+    ```
+
+2. Be sure to **replace `YOUR_WRITE_KEY` with your API secret**, leaving in the quotation marks. Your API Key can be obtained from your AppFit Dashboard.
+
+3. Put any other AppFit `<script>` tags for tracking (e.g. tracking a screen view) *after* the tag above.
+
+### Example
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>My Website</title>
+
+        <!---------------->
+        <!-- Pasted tag -->
+        <!---------------->
+        <script>
+        window.AppFit={cache:{},trackEvent:(e,t)=>(window.AppFit.cache||(window.AppFit.cache={}),window.AppFit.cache.events||(window.AppFit.cache.events=[]),window.AppFit.cache.events.push({eventName:e,payload:t}),Promise.resolve()),identifyUser(e){window.AppFit.cache||(window.AppFit.cache={}),window.AppFit.cache.identity=e}},window.startAppFit=e=>{window.AppFit.apiKey=e;var t=document.createElement("script");t.type="module",t.src="https://d1433kipn7zjh1.cloudfront.net/appfit.js";var p=document.createElement("script");p.noModule=!0,p.src="https://d1433kipn7zjh1.cloudfront.net/appfit-legacy.js";var i=document.getElementsByTagName("script")[0];i.parentNode.insertBefore(t,i),i.parentNode.insertBefore(p,i)},
+    
+        window.startAppFit("my_secret_key_from_the_dashboard");
+        </script>
+
+        <!------------------->
+        <!-- Example usage -->
+        <!------------------->
+        <script>
+            window.AppFit.trackEvent("screen_viewed", { screen: window.location.pathname })
+        </script>
+    </head>
+
+    <body>
+        <main>
+            <h1>Welcome to My Website</h1>
+        </main>
+    </body>
+</html>
+```
+
+### How does it work?
+
+A `<script>` tag above tells a web browser that the text inside is JavaScript.
+
+The code in the above `<script>` is a small script that loads the full AppFit code from a CDN, or Content Delivery Network, which is a network of servers that store data close to a user for quick delivery.
+
+Once the full AppFit code is loaded, it is available to other `<script>` tags. In the example above, the `window.AppFit.trackEvent()` tracking code is ready to use after the full code is loaded.
+
+---
+
+The AppFit SDK is Open Source. Find it on [GitHub here](https://github.com/uptech/appfit-javascript-sdk)
diff --git a/docs/browser/web-pages/usage.md b/docs/browser/web-pages/usage.md
@@ -0,0 +1,15 @@
+# Usage
+
+Once you have pasted the installation `<script>` tag inside the `<head>` tags of a webpage, you can use AppFit's `trackEvent` function to record user behavior.
+
+See the following for specific use cases.
+
+## Page Views
+
+This event will record a user visiting a webpage.
+
+```html
+<script>
+window.AppFit.trackEvent("screen_viewed", { screen: window.location.pathname })
+</script>
+```
diff --git a/docs/node/index.md b/docs/node/index.md
@@ -0,0 +1,7 @@
+# AppFit for Node
+
+The AppFit Node SDK allows you to drop-in analytic tracking, direct to your AppFit project.
+
+## Getting Started
+
+Before you can start tracking events, you have to grab your API Key from your AppFit Dashboard
diff --git a/docs/node/installation.md b/docs/node/installation.md
@@ -0,0 +1,21 @@
+# AppFit for JavaScript
+
+The JavaScript SDK allows you to drop-in analytic tracking, direct to your AppFit project.
+
+## Installing
+
+Install the SDK using NPM or Yarn.
+
+=== "NPM"
+    ```shell
+    npm install @uptechworks/appfit-browser-sdk
+    ```
+
+=== "Yarn"
+    ```shell
+    yarn add @uptechworks/appfit-browser-sdk
+    ```
+
+---
+
+The AppFit SDK is Open Source. Find it on [GitHub here](https://github.com/uptech/appfit-javascript-sdk)
diff --git a/docs/node/usage.md b/docs/node/usage.md
@@ -0,0 +1,51 @@
+# Usage
+
+## Configuration & Tracking
+
+To configure the AppFit SDK, simply construct an `AppFitServerConfiguration` class and insert your API Key.
+
+Your API Key can be obtained from your AppFit Dashboard.
+
+```javascript
+const appFitConfig = new AppFitServerConfiguration('API_KEY');
+```
+
+This configuration should be passed to a new `AppFit` client:
+```javascript
+const appFitClient = new AppFit(appFitConfig);
+```
+
+Once you have the client constructed, tracking an event is as simple as calling `trackEvent`.
+
+A full example can be found below.
+
+```javascript
+import {
+  AppFit,
+  AppFitServerConfiguration,
+} from '@uptechworks/appfit-node-sdk';
+
+// Create the AppFitServerConfiguration
+const config = new AppFitServerConfiguration("API_KEY");
+
+// Create the AppFit Client
+const appFitClient = new AppFit(config);
+
+// Use the client to track events
+await appFitClient.trackEvent("event_name", { example: 'property' });
+```
+
+## Identifying Users
+
+The AppFit SDK includes an identify call that you can use to identify users in your analytic events.
+This method supports any String-based identifier.
+
+```javascript
+appFitClient.identifyUser("USER_ID");
+```
+
+Leaving out the user ID will remove all future events from including the id.
+
+```javascript
+appFitClient.identifyUser();
+```
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -36,11 +36,30 @@ nav:
       - kotlin/index.md
       - Installation: kotlin/installation.md
       - Usage: kotlin/usage.md
+
+    # Browser
+    - Browser:
+      - browser/index.md
+      - Web Pages: 
+        - browser/web-pages/index.md
+        - Installation: browser/web-pages/installation.md
+        - Usage: browser/web-pages/usage.md
+      - Web Apps: 
+        - browser/web-apps/index.md
+        - Installation: browser/web-apps/installation.md
+        - Usage: browser/web-apps/usage.md
+
+    # Node
+    - Node:
+      - node/index.md
+      - Installation: node/installation.md
+      - Usage: node/usage.md
 
   # SDK Links
   - Swift SDK: 'https://github.com/uptech/appfit-swift-sdk'
   - Flutter SDK: 'https://github.com/uptech/appfit-flutter-sdk'
   - Kotlin SDK: 'https://github.com/uptech/appfit-kotlin-sdk'
+  - JavaScript SDK: 'https://github.com/uptech/appfit-javascript-sdk'
 
 # Configuration
 theme: