add example in code docs

.changeset/brave-singers-crash.md

@@ -0,0 +1,5 @@
+---
+"@mbinjamil/matomo-client": patch
+---
+
+Add examples in code docs

README.md

@@ -20,6 +20,8 @@ Heavily inspired by [fathom-client](https://github.com/derrickreimer/fathom-clie
 
 ## Usage
 
+### [API Reference](docs/README.md)
+
 The basic way to use this library to call `load` function when your app first loads (or mounts) and call any tracking functions wherever you want. Ideally you would call `trackPageView` whenever your app changes routes.
 
 Below I've described usage for two popular choices, but you can use it with any frontend library or framework by following the basic principles.
@@ -110,7 +112,4 @@ export default function RootLayout({ children }: { children: ReactNode }) {
     </html>
   );
 }
-```
-
-### [API Reference](docs/README.md)
-
+```

docs/functions/load.md

@@ -5,7 +5,7 @@
 > **load**(`trackerUrl`, `siteId`): `void`
 
 Injects the Matomo tracking script into the DOM and loads it asynchronously.
-It is idempotent, i.e. safe to call multiple times, because it will only load the script once.
+It is idempotent, i.e. safe to call multiple times, because it will only load the script once
 
 ## Parameters
 
@@ -31,4 +31,4 @@ load("https://your-matomo-url.com", 1);
 
 ## Source
 
-[index.ts:21](https://github.com/binjamil/matomo-client/blob/0aa0d3c26d26b54fc742897faa51e4fa42a1e734/src/index.ts#L21)
+[index.ts:21](https://github.com/binjamil/matomo-client/blob/6ed3beaf3789c86fc90228d391fdeedb61a3c1c6/src/index.ts#L21)

docs/functions/push.md

@@ -28,4 +28,4 @@ push([ 'API_method_name', parameter_list ]);
 
 ## Source
 
-[index.ts:83](https://github.com/binjamil/matomo-client/blob/0aa0d3c26d26b54fc742897faa51e4fa42a1e734/src/index.ts#L83)
+[index.ts:97](https://github.com/binjamil/matomo-client/blob/6ed3beaf3789c86fc90228d391fdeedb61a3c1c6/src/index.ts#L97)

docs/functions/trackEvent.md

@@ -28,6 +28,14 @@ An optional numeric value
 
 `void`
 
+## Example
+
+```
+import { trackEvent } from "@mbinjamil/matomo-client";
+
+trackEvent("ecommerce", "checkout", "total_amount", 1010);
+```
+
 ## Source
 
-[index.ts:65](https://github.com/binjamil/matomo-client/blob/0aa0d3c26d26b54fc742897faa51e4fa42a1e734/src/index.ts#L65)
+[index.ts:79](https://github.com/binjamil/matomo-client/blob/6ed3beaf3789c86fc90228d391fdeedb61a3c1c6/src/index.ts#L79)

docs/functions/trackPageView.md

@@ -17,6 +17,14 @@ A custom title that overrides the default HTML page title
 
 `void`
 
+## Example
+
+```
+import { trackPageView } from "@mbinjamil/matomo-client";
+
+trackPageView();
+```
+
 ## Source
 
-[index.ts:52](https://github.com/binjamil/matomo-client/blob/0aa0d3c26d26b54fc742897faa51e4fa42a1e734/src/index.ts#L52)
+[index.ts:59](https://github.com/binjamil/matomo-client/blob/6ed3beaf3789c86fc90228d391fdeedb61a3c1c6/src/index.ts#L59)

src/index.ts

@@ -6,7 +6,7 @@ declare global {
 
 /**
  * Injects the Matomo tracking script into the DOM and loads it asynchronously.
- * It is idempotent, i.e. safe to call multiple times, because it will only load the script once.
+ * It is idempotent, i.e. safe to call multiple times, because it will only load the script once
  *
  * @param trackerUrl - Your Matomo URL
  * @param siteId - Site ID of the website you are tracking in Matomo
@@ -22,7 +22,7 @@ export const load = (trackerUrl: string, siteId: number): void => {
   if (window._paq) {
     return;
   }
-  
+
   let tracker = document.createElement("script");
   let firstScript =
     document.getElementsByTagName("script")[0] ||
@@ -48,6 +48,13 @@ export const load = (trackerUrl: string, siteId: number): void => {
  * by default does not support client-side routing
  *
  * @param pageTitle - A custom title that overrides the default HTML page title
+ * 
+ * @example
+ * ```
+ * import { trackPageView } from "@mbinjamil/matomo-client";
+ * 
+ * trackPageView();
+ * ```
  */
 export const trackPageView = (pageTitle?: string): void => {
   push(["setCustomUrl", window.location.href]);
@@ -61,7 +68,14 @@ export const trackPageView = (pageTitle?: string): void => {
  * @param action - An event action (Play, Pause, Duration, Add Playlist, Downloaded, Clicked...)
  * @param name - An optional event name
  * @param value - An optional numeric value
- */
+ * 
+ * @example
+ * ```
+ * import { trackEvent } from "@mbinjamil/matomo-client";
+ * 
+ * trackEvent("ecommerce", "checkout", "total_amount", 1010);
+ * ```
+ */ 
 export const trackEvent = (
   category: string,
   action: string,