chore: improve readme structure

doc/gtag_setup.md

@@ -22,3 +22,18 @@ const App = () => {
   );
 };
 ```
+
+
+## Usage
+
+```js
+import {
+  EventTypes,
+  pushGaEvent,
+} from '@freshheads/analytics-essentials';
+
+pushGaEvent({ 
+    type: EventTypes.CLICK,
+    name: 'hero_button_click' 
+});
+```

doc/mixpanel_setup.md

@@ -4,10 +4,6 @@
 This implementation of mixpanel relies on a backend service to send the data to mixpanel. The goal of the frontend lib is to provide a typechecked event to help developers push events the same way.
 For the backend Freshheads created a php bundle, [FHMixpanelBundle](https://github.com/freshheads/FHMixpanelBundle) and a node library will also be created in the future.
 
-## Installation
-
-`npm install @freshheads/analytics-essentials`
-
 ## Usage
 
 Add the MixpanelProvider to your app:

doc/tagmanager_setup.md

@@ -17,3 +17,31 @@ const App = () => {
   );
 };
 ```
+
+## Usage
+
+```js
+import {
+    EventTypes,
+    pushDataLayerEvent,
+} from '@freshheads/analytics-essentials';
+
+pushDataLayerEvent({
+    type: EventTypes.CLICK,
+    name: 'hero_button_click',
+});
+```
+
+## Optional params
+
+```js
+pushDataLayerEvent({
+    type: EventTypes.CLICK,
+    name: 'hero_button_click',
+    context: {
+      // context is typed based on type
+      // you can always extend context with your custom properties
+    }
+}),
+
+```

package.json

@@ -62,5 +62,8 @@
         "next": {
             "optional": true
         }
+    },
+    "dependencies": {
+        "@freshheads/analytics-essentials": "^0.0.4"
     }
 }

readme.md

@@ -8,52 +8,8 @@
 npm i @freshheads/analytics-essentials
 ```
 
-### Setup Google Tag or Google Tagmanager
+### Usage by analytics provider
 
+- [Mixpanel Setup](doc/mixpanel_setup.md)
 - [Gtag Setup](doc/gtag_setup.md)
 - [Tagmanager Setup](doc/tagmanager_setup.md)
-
-
-## Usage
-
-### With gtag
-
-```js
-import {
-  EventTypes,
-  pushGaEvent,
-} from '@freshheads/analytics-essentials';
-
-pushGaEvent({ 
-    type: EventTypes.CLICK,
-    name: 'hero_button_click' 
-});
-```
-
-### With Tag Manager
-
-```js
-import {
-    EventTypes,
-    pushDataLayerEvent,
-} from '@freshheads/analytics-essentials';
-
-pushDataLayerEvent({
-    type: EventTypes.CLICK,
-    name: 'hero_button_click',
-});
-```
-
-## Optional params
-
-```js
-pushDataLayerEvent({
-    type: EventTypes.CLICK,
-    name: 'hero_button_click',
-    context: {
-      // context is typed based on type
-      // you can always extend context with your custom properties
-    }
-}),
-
-```