Skip to content

Commit d202c5c

Browse files
mychidarkomychidarko
committed
feat: add tracking docs
1 parent ce95ce9 commit d202c5c

File tree

2 files changed

+75
-0
lines changed

2 files changed

+75
-0
lines changed

‎src/learn/index.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,10 @@ After building your app, you'll want to deploy it to the web so that others can
145145

146146
Once your app is live, you'll want to monitor it to ensure it's running smoothly. For now, we have a guide on [monitoring your Leaf app with Sentry](/learn/monitoring/sentry/) to help you get started. We'll be adding guides for other monitoring tools like New Relic, Datadog, and more in the future.
147147

148+
## Track data in your app
149+
150+
Marketing teams and founders often need to track user interactions and events in their applications to make data-driven decisions. We have a guide on [tracking data in your Leaf app](/learn/monitoring/tracking) that covers how to set up Google Analytics and Mixpanel for tracking user interactions and events.
151+
148152
## Contributing
149153

150154
If you've written a tutorial that you think would be a great addition to our Learn section, feel free to submit a PR to our [GitHub repository](https://github.com/leafsphp/docs) with your tutorial. For our readers' benefit, be sure to follow the [contribution guide](/learn/contributing) when submitting your tutorial. Thank you for your contribution!

‎src/learn/monitoring/tracking.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# Data Tracking
2+
3+
Data tracking is a crucial aspect of modern web applications, enabling you and marketing teams to monitor user interactions, events, and know how users engage with your application. There are many tools available for tracking data, but some of the most popular ones are Google Analytics, Mixpanel and Amplitude. These tools provide insights into user behavior, allowing you to make data-driven decisions to improve your application.
4+
5+
## What Are We Building
6+
7+
This experiment will guide you through setting up data tracking in your Leaf MVC application using Google Analytics and Mixpanel using different setups like Inertia and Blade. Luckily, all of these tools use similar concepts for frontend tracking which usually involves adding a script tag to your HTML and initializing the tracking library with your project ID or API key.
8+
9+
## HTML Head Setup
10+
11+
If you are using Leaf MVC with React, Vue, or Svelte via Inertia, you can easily integrate Google Analytics and Mixpanel by adding the respective scripts to the `_inertia.blade.php` file included in Leaf's Inertia setup. This file is located in the `app/views` directory of your Leaf MVC application.
12+
13+
```php:no-line-numbers [_inertia.blade.php]
14+
<head>
15+
<meta charset="UTF-8">
16+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
17+
<title inertia>My app Title</title>
18+
@viteReactRefresh
19+
@vite(['/js/app.jsx', "/js/pages/{$page['component']}.jsx"])
20+
@inertiaHead
21+
22+
<!-- Google Analytics/MixPanel/... -->
23+
<script ... />
24+
</head>
25+
```
26+
27+
The same applies to the Blade setup, except that you would want the script on all pages, and for this, we recommend adding it to a layout file which you can include in your Blade views.
28+
29+
## Server side setup
30+
31+
To track data on the server side, you can use the respective SDKs for Google Analytics and Mixpanel. These SDKs allow you to send events and user data directly from your Leaf MVC application to the tracking service. For this experiment, we will use the Mixpanel SDK to track page views and events.
32+
33+
You can get started by installing the Mixpanel SDK via Composer:
34+
35+
::: code-group
36+
37+
```bash:no-line-numbers [Leaf CLI]
38+
leaf install mixpanel/mixpanel-php
39+
```
40+
41+
```bash:no-line-numbers [Composer]
42+
composer require mixpanel/mixpanel-php
43+
```
44+
45+
:::
46+
47+
Next, you can initialize the Mixpanel SDK in your Leaf MVC application. You can do this in the `app/routes/index.php` file, where you can set up the Mixpanel client with your project token. We're using this file because it's loaded before any routes are defined, ensuring that the Mixpanel client is available throughout your application. Think of it like a service provider in other frameworks.
48+
49+
```php:no-line-numbers [app/routes/index.php]
50+
app()->register('mixpanel', function () {
51+
return Mixpanel::getInstance(
52+
_env('MIXPANEL_TOKEN'),
53+
);
54+
});
55+
```
56+
57+
This will register the Mixpanel client directly in the Leaf container, allowing you to access it anywhere in your application using `app()->mixpanel`. With this setup, you can now track events and user interactions in your Leaf MVC application.
58+
59+
## Tracking Events
60+
61+
To track events in your Leaf MVC application, you can use the Mixpanel client that you registered earlier. You can track events by calling the `track` method on the Mixpanel client. Here's an example of how to track a page view event:
62+
63+
```php
64+
app()->mixpanel->track('Store Viewed', [
65+
'store_id' => $store->id,
66+
'store_name' => $store->name,
67+
'source' => request()->headers('Referer') ?? 'unknown',
68+
]);
69+
```
70+
71+
This code tracks a "Store Viewed" event with the store ID, store name, and the source of the request (the referring URL). You can use this same approach to track any events in your application, using any SDK that you prefer. Just remember to initialize the SDK before your routes are defined, and you can access it anywhere in your application once you register it in the Leaf container.

0 commit comments

Comments
 (0)