# استخدام "أمامي" لتحليل محلي

<!--category-- ASP.NET, Umami -->
<datetime class="hidden">2024-08-08T15:53</datetime>

## المقدمة

أحد الأشياء التي أزعجتني بشأن وضعي الحالي كان استخدام غوغل آنلاينكس للحصول على بيانات الزوار (ما هو القليل منها ??). لذا أردت أن أجد شيء يمكنني أن أفعله بنفسي | - | المضيف الذي لم ينقل البيانات إلى غوغل أو أي طرف ثالث آخر |. | وجدت [أومامي](https://umami.is/) الذي هو ببساطة , أنفسه - حل لتحليل شبكة الإنترنت المضيفة | . | إنه |' | بديل عظيم لـ Google Analytics و هو |MSC4 | نسبيا | MSC5 | سهلة في الإعداد | msc6

[TOC]

## التثبيت

التوصيل بسيط جداً ولكن أخذت القليل من الرنين لكي تذهب حقاً

### برمجة الدوكر

ولأنني أردت أن أضيف "أمامي" إلى جهازي الحالي - لتركيب تركيبي كنت بحاجة إلى إضافة خدمة جديدة لجهازي `docker-compose.yml` فايل. أضافت التالي إلى أسفل الفايل :

```yaml
  umami:
    image: ghcr.io/umami-software/umami:postgresql-latest
    env_file: .env
    environment:
      DATABASE_URL: ${DATABASE_URL}
      DATABASE_TYPE: ${DATABASE_TYPE}
      HASH_SALT: ${HASH_SALT}
      APP_SECRET: ${APP_SECRET}
      TRACKER_SCRIPT_NAME: getinfo
      API_COLLECT_ENDPOINT: all
    ports:
      - "3000:3000"
    depends_on:
      - db
    networks:
      - app_network
    restart: always
  db:
    image: postgres:16-alpine
    env_file:
      - .env
    networks:
      - app_network
    healthcheck:
      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER}"]
      interval: 5s
      timeout: 5s
      retries: 5
    volumes:
      - /mnt/umami/postgres:/var/lib/postgresql/data
    restart: always
  cloudflaredumami:
    image: cloudflare/cloudflared:latest
    command: tunnel --no-autoupdate run --token ${CLOUDFLARED_UMAMI_TOKEN}
    env_file:
      - .env
    restart: always
    networks:
      - app_network


```

هذا الدوكر-compose.file yml يحتوي على الإعدادات التاليةM SK2

1. خدمة جديدة تسمى `umami` التي تستخدم `ghcr.io/umami-software/umami:postgresql-latest` الصورة. هذه الخدمة تستخدم لتشغيل خدمة تحليلumami.
2. خدمة جديدة تسمى `db` التي تستخدم `postgres:16-alpine` الصورة. هذه الخدمة تستخدم لتشغيل قاعدة بيانات Postgres التي يستخدمها أمامي لتخزين بياناتها.
   ملاحظة لهذا الخدمة أنا 'm قمت بتعيينه إلى مجلد على سروري بحيث يستمر البيانات بين ال relays

```yaml
    volumes:
      - /mnt/umami/postgres:/var/lib/postgresql/data
```

أنت ' ستحتاج إلى وجود هذا المشرف و أن يكون قابلاً للكتابة من قبل مستخدم الدوكر على سرورك ( مجدداً ليس خبيراً للينكس لذلك

```shell
chmod 777 /mnt/umami/postgres
```

3. خدمة جديدة تسمى `cloudflaredumami` التي تستخدم `cloudflare/cloudflared:latest` الصورة. هذه الخدمة تستخدم لنقل خدمة الأمامي عبر Cloudflare لتسمح لها بالإتصال من الإنترنت.

### فايل ال Env

من أجل دعم هذا قمت بتحديث `.env` File to include the following:

```shell
CLOUDFLARED_UMAMI_TOKEN=<cloudflaretoken>
DATABASE_TYPE=postgresql
HASH_SALT=<salt>

POSTGRES_DB=postgres
POSTGRES_USER=<postgresuser>
POSTGRES_PASSWORD=<postgrespassword>
UMAMI_SECRET=<umamisecret>

APP_SECRET=${UMAMI_SECRET}
UMAMI_USER=${POSTGRES_USER}
UMAMI_PASS=${POSTGRES_PASSWORD}
DATABASE_URL=postgresql://${UMAMI_USER}:${UMAMI_PASS}@db:5432/${POSTGRES_DB}
```

هذا يضع إعداداً للدوكر compose (the `<>` من الواضح أن الدرجات تحتاج إلى استبدالها بقيمك الخاصة). `cloudflaredumami` يتم استخدام الخدمة لربط خدمة الأمامي عبر Cloudflare لتسمح لها بالإتصال من الإنترنت.

### تونل Cloudflare

لإعداد تونل Cloudflare لهذا ( الذي يعمل كطريق لឯកសារ js المستخدمة للتحليل - getinfo.jsM SK3 استخدمت موقعاً

![تونل Cloudflare](umamisetup.png)

هذا يحرك الممر إلى خدمة الأمامي ويسمح له بالإتصال من الإنترنت `umami` خدمة في الحاسوب

### إعدادumami في صفحة

لتشغيل مسار النص (المتصل به `getinfo` في إعدادي أعلى) أنا'لقد أضافت مدخلاً للتركيب لإعدادات تطبيقي

```json
 "Analytics":{
   "UmamiPath" : "https://umamilocal.mostlylucid.net/getinfo",
   "WebsiteId" : "32c2aa31-b1ac-44c0-b8f3-ff1f50403bee"
 },
```

يمكنك أيضاً إضافتها إلى ឯកសារ .env الخاصة بك وتحويلها كتغييرات بيئية إلى Docker

```shell
ANALYTICS__UMAMIPATH="https://umamilocal.mostlylucid.net/getinfo"
ANALYTICS_WEBSITEID="32c2aa31-b1ac-44c0-b8f3-ff1f50403bee"
```

```yaml
  mostlylucid:
    image: scottgal/mostlylucid:latest
    ports:
      - 8080:8080
    restart: always
    environment:
    ...
      - Analytics__UmamiPath=${ANALYTICS_UMAMIPATH}
      - Analytics__WebsiteId=${ANALYTICS_WEBSITEID}
```

تقوم بإعداد عنوان الموقع في لوحة المفاتيح Umami عندما تقوم بتركيب الموقع. (لاحظ أن إسم المستخدم والكلمة المرور المسبقة لخدمة Umami هي `admin` و `umami`, تحتاج لتغيير هذه بعد الإعداد
![لوحة اللوحة Umami](umamiaddwebsite.png)

مع الإعدادات المرتبطة cs file:

```csharp
public class AnalyticsSettings : IConfigSection
{
    public static string Section => "Analytics";
    public string? UmamiPath { get; set; }
}
```

مرة أخرى هذا يستخدم برمجة POCO خاصتي ([هنا](/blog/addingidentityfreegoogleauth#configuring-google-auth-with-poco)) لإعداد الإعدادات.
إعداده في برنامجي.cs:

```csharp
builder.Configure<AnalyticsSettings>();
```

وأخيراً في `BaseController.cs` `OnGet` الطريقة I'لقد أضفت ما يلي لتحديد مسار النص التحليلي:

```csharp
   public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        if (!Request.IsHtmx())
        {
            ViewBag.UmamiPath = _analyticsSettings.UmamiPath;
            ViewBag.UmamiWebsiteId = _analyticsSettings.WebsiteId;
        }
        base.OnActionExecuting(filterContext);
    }
    
```

هذا يحدد مسار برمجة التحليل التي ستستخدم في ملف التصميم.

### ورقة الرسم

وأخيراً , أنا ' أضفت ما يلي إلى ملف التصميم الخاص بي ليحتوي على كتابة التحليلات

```html
<script defer src="@ViewBag.UmamiPath" data-website-id="@ViewBag.UmamiWebsiteId"></script>
```

هذا يتضمن النص في الصفحة ويقوم بتحديد رقم الموقع للخدمات التحليلية.

## استثناء نفسك من التحليل

من أجل استبعاد زيارتك الخاصة من البيانات التحليلية يمكنكم إضافة المخزن المحلي التالي في متصفحكم:

في أدوات Chrome dev (Ctrl+ShiftM SK2I على النوافذ ) يمكنكم إضافة ما يلي إلى консоли

```javascript
localStorage.setItem("umami.disabled", 1)
```

## الاستنتاجات

كان هذا نوعاً ما مزيف لإعداده لكني 'أنا سعيدة بالنتيجة . لدي الآن خدمة التحليل المخصصة لـ - , التي لا تنقل البيانات إلى غوغل أو أي طرف ثالث آخر . .. إنه .