Skip to content

Commit 5647275

Browse files
philipcolejohnsonphilipcolejohnson
committed
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. <!-- ps-id: 897b010c-ed75-428b-aa41-a9f928de4539 -->
1 parent 7a0a6db commit 5647275

File tree

11 files changed

+274
-0
lines changed

11 files changed

+274
-0
lines changed

‎docs/browser/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# AppFit for the Browser
2+
3+
The Flutter SDK allows you to drop-in analytic tracking, direct to your AppFit project.
4+
5+
## Getting Started
6+
7+
Before you can start tracking events, you have to grab your API Key from your AppFit Dashboard

‎docs/browser/web-apps/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# AppFit for the Browser
2+
3+
The AppFit Browser SDK allows you to drop-in analytic tracking, direct to your AppFit project.
4+
5+
## Getting Started
6+
7+
Before you can start tracking events, you have to grab your API Key from your AppFit Dashboard

‎docs/browser/web-apps/installation.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# AppFit for JavaScript
2+
3+
The JavaScript SDK allows you to drop-in analytic tracking, direct to your AppFit project.
4+
5+
## Installation
6+
7+
Install the SDK using NPM or Yarn.
8+
9+
=== "NPM"
10+
```shell
11+
npm install @uptechworks/appfit-browser-sdk
12+
```
13+
14+
=== "Yarn"
15+
```shell
16+
yarn add @uptechworks/appfit-browser-sdk
17+
```
18+
19+
---
20+
21+
The AppFit SDK is Open Source. Find it on [GitHub here](https://github.com/uptech/appfit-javascript-sdk)

‎docs/browser/web-apps/usage.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Usage
2+
3+
## Configuration & Tracking
4+
5+
To configure the AppFit SDK, simply construct an `AppFitBrowserConfiguration` class and insert your API Key.
6+
7+
Your API Key can be obtained from your AppFit Dashboard.
8+
9+
```javascript
10+
const appFitConfig = new AppFitBrowserConfiguration('API_KEY');
11+
```
12+
13+
This configuration should be passed to a new `AppFit` client:
14+
```javascript
15+
const appFitClient = new AppFit(appFitConfig);
16+
```
17+
18+
Once you have the client constructed, tracking an event is as simple as calling `trackEvent`.
19+
20+
A full example can be found below.
21+
22+
```javascript
23+
import {
24+
AppFit,
25+
AppFitBrowserConfiguration,
26+
} from '@uptechworks/appfit-browser-sdk';
27+
28+
// Create the AppFitBrowserConfiguration
29+
const config = new AppFitBrowserConfiguration("API_KEY");
30+
31+
// Create the AppFit Client
32+
const appFitClient = new AppFit(config);
33+
34+
// Use the client to track events
35+
await appFitClient.trackEvent("event_name", { example: 'property' });
36+
```
37+
38+
## Identifying Users
39+
40+
The AppFit SDK includes an identify call that you can use to identify users in your analytic events.
41+
This method supports any String-based identifier.
42+
43+
```javascript
44+
appFitClient.identifyUser("USER_ID");
45+
```
46+
47+
Leaving out the user ID will remove all future events from including the id.
48+
49+
```javascript
50+
appFitClient.identifyUser();
51+
```
52+
53+
## Cached Events
54+
55+
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.

‎docs/browser/web-pages/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# AppFit for the Browser
2+
3+
The JavaScript SDK allows you to drop-in analytic tracking, direct to your AppFit project.
4+
5+
## Getting Started
6+
7+
Before you can start tracking events, you have to grab your API Key from your AppFit Dashboard

‎docs/browser/web-pages/installation.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# AppFit for JavaScript
2+
3+
The JavaScript SDK allows you to drop-in analytic tracking, direct to your AppFit project.
4+
5+
## How to install
6+
7+
1. Install AppFit by pasting the following `<script>` tag into your webpage between the `<head>` tags.
8+
9+
```html
10+
<script>
11+
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)},
12+
13+
window.startAppFit("YOUR_WRITE_KEY");
14+
</script>
15+
```
16+
17+
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.
18+
19+
3. Put any other AppFit `<script>` tags for tracking (e.g. tracking a screen view) *after* the tag above.
20+
21+
### Example
22+
23+
```html
24+
<!DOCTYPE html>
25+
<html lang="en">
26+
<head>
27+
<title>My Website</title>
28+
29+
<!---------------->
30+
<!-- Pasted tag -->
31+
<!---------------->
32+
<script>
33+
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)},
34+
35+
window.startAppFit("my_secret_key_from_the_dashboard");
36+
</script>
37+
38+
<!------------------->
39+
<!-- Example usage -->
40+
<!------------------->
41+
<script>
42+
window.AppFit.trackEvent("screen_viewed", { screen: window.location.pathname })
43+
</script>
44+
</head>
45+
46+
<body>
47+
<main>
48+
<h1>Welcome to My Website</h1>
49+
</main>
50+
</body>
51+
</html>
52+
```
53+
54+
### How does it work?
55+
56+
A `<script>` tag above tells a web browser that the text inside is JavaScript.
57+
58+
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.
59+
60+
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.
61+
62+
---
63+
64+
The AppFit SDK is Open Source. Find it on [GitHub here](https://github.com/uptech/appfit-javascript-sdk)

‎docs/browser/web-pages/usage.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Usage
2+
3+
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.
4+
5+
See the following for specific use cases.
6+
7+
## Page Views
8+
9+
This event will record a user visiting a webpage.
10+
11+
```html
12+
<script>
13+
window.AppFit.trackEvent("screen_viewed", { screen: window.location.pathname })
14+
</script>
15+
```

‎docs/node/index.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# AppFit for Node
2+
3+
The AppFit Node SDK allows you to drop-in analytic tracking, direct to your AppFit project.
4+
5+
## Getting Started
6+
7+
Before you can start tracking events, you have to grab your API Key from your AppFit Dashboard

‎docs/node/installation.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# AppFit for JavaScript
2+
3+
The JavaScript SDK allows you to drop-in analytic tracking, direct to your AppFit project.
4+
5+
## Installing
6+
7+
Install the SDK using NPM or Yarn.
8+
9+
=== "NPM"
10+
```shell
11+
npm install @uptechworks/appfit-browser-sdk
12+
```
13+
14+
=== "Yarn"
15+
```shell
16+
yarn add @uptechworks/appfit-browser-sdk
17+
```
18+
19+
---
20+
21+
The AppFit SDK is Open Source. Find it on [GitHub here](https://github.com/uptech/appfit-javascript-sdk)

‎docs/node/usage.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Usage
2+
3+
## Configuration & Tracking
4+
5+
To configure the AppFit SDK, simply construct an `AppFitServerConfiguration` class and insert your API Key.
6+
7+
Your API Key can be obtained from your AppFit Dashboard.
8+
9+
```javascript
10+
const appFitConfig = new AppFitServerConfiguration('API_KEY');
11+
```
12+
13+
This configuration should be passed to a new `AppFit` client:
14+
```javascript
15+
const appFitClient = new AppFit(appFitConfig);
16+
```
17+
18+
Once you have the client constructed, tracking an event is as simple as calling `trackEvent`.
19+
20+
A full example can be found below.
21+
22+
```javascript
23+
import {
24+
AppFit,
25+
AppFitServerConfiguration,
26+
} from '@uptechworks/appfit-node-sdk';
27+
28+
// Create the AppFitServerConfiguration
29+
const config = new AppFitServerConfiguration("API_KEY");
30+
31+
// Create the AppFit Client
32+
const appFitClient = new AppFit(config);
33+
34+
// Use the client to track events
35+
await appFitClient.trackEvent("event_name", { example: 'property' });
36+
```
37+
38+
## Identifying Users
39+
40+
The AppFit SDK includes an identify call that you can use to identify users in your analytic events.
41+
This method supports any String-based identifier.
42+
43+
```javascript
44+
appFitClient.identifyUser("USER_ID");
45+
```
46+
47+
Leaving out the user ID will remove all future events from including the id.
48+
49+
```javascript
50+
appFitClient.identifyUser();
51+
```

‎mkdocs.yml

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,30 @@ nav:
3636
- kotlin/index.md
3737
- Installation: kotlin/installation.md
3838
- Usage: kotlin/usage.md
39+
40+
# Browser
41+
- Browser:
42+
- browser/index.md
43+
- Web Pages:
44+
- browser/web-pages/index.md
45+
- Installation: browser/web-pages/installation.md
46+
- Usage: browser/web-pages/usage.md
47+
- Web Apps:
48+
- browser/web-apps/index.md
49+
- Installation: browser/web-apps/installation.md
50+
- Usage: browser/web-apps/usage.md
51+
52+
# Node
53+
- Node:
54+
- node/index.md
55+
- Installation: node/installation.md
56+
- Usage: node/usage.md
3957

4058
# SDK Links
4159
- Swift SDK: 'https://github.com/uptech/appfit-swift-sdk'
4260
- Flutter SDK: 'https://github.com/uptech/appfit-flutter-sdk'
4361
- Kotlin SDK: 'https://github.com/uptech/appfit-kotlin-sdk'
62+
- JavaScript SDK: 'https://github.com/uptech/appfit-javascript-sdk'
4463

4564
# Configuration
4665
theme:

0 commit comments

Comments
 (0)