# स्थानीय विश्लेषण के लिए उमामी का उपयोग

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

## परिचय

मेरे वर्तमान सेटअप के बारे में मुझे परेशान करने वाले चीजों में से एक था Google Analytics का उपयोग करने के लिए दर्शक डेटा प्राप्त करने के लिये करना है ( क्या little there is of it. [उमामी](https://umami.is/) जो एक सरल है

[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.yml फ़ाइल में निम्न सेटअप है

1. एक नया सेवा बुलाया गया `umami` जो प्रयोग करता है `ghcr.io/umami-software/umami:postgresql-latest` इस सेवा का उपयोग Umami विश्लेषण सेवा चलाने के लिए किया जाता है
2. एक नया सेवा बुलाया गया `db` जो प्रयोग करता है `postgres:16-alpine` छवि. इस सेवा का उपयोग Postgres डाटाबेस चलाने के लिए किया जाता है जो Umami अपने डेटा भंडारण के लिए प्रयोग करता है
   इस सेवा के लिए नोट I'm इसे मेरे सर्वर पर एक निर्देशिका में मानचित्रित किया है ताकि डेटा restarts के बीच स्थायी हो

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

आपको इस निर्देशिका की आवश्यकता होगी और आपके सर्वर पर डोकर उपयोक्ता द्वारा लिखी जा सकती है

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

3. एक नया सेवा बुलाया गया `cloudflaredumami` जो प्रयोग करता है `cloudflare/cloudflared:latest` इस सेवा का उपयोग क्लाउडफ्लेर के माध्यम से उमामी सेवा को इंटरनेट से अभिगम प्रदान करने के लिए उपयोग किया जाता है

### एनवी फ़ाइल

इसे समर्थन के लिए मैं भी मेरी अद्यतन `.env` फ़ाइल में निम्नलिखित शामिल करें:

```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 सुरंग स्थापित करने के लिए (जो विश्लेषण के लिए उपयोग किए जा रहे js फ़ाइल के लिए मार्ग के रूप में कार्य करता है

![क्लाउडफ्लेर सुरंग](umamisetup.png)

यह Umami सेवा के लिए सुरंग स्थापित करता है और इसे इंटरनेट से पहुँचने की अनुमति देता है `umami` डोकर में सेवा

### पृष्ठ में उमामी सेटअप

स्क्रिप्ट के लिए पथ सक्षम करने हेतु (called `getinfo` मेरे उपरोक्त सेटअप में ) मैं\'\में अपने अनुप्रयोग सेटिंग्स के लिए एक कॉन्फ़िगरेशन प्रविष्टि जोड़ा है

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

आप इन्हें अपने .env फ़ाइल में भी जोड़ सकते हैं और उन्हें परिवेश चर के रूप में डॉकर को पास कर सकते हैं

```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}
```

You set up the WebsiteId in the Umami dashboard when you setup the site. M SK1Note the default username and password for the UmAMI service is `admin` और `umami`आप सेटअप के बाद इन को बदलने की जरूरत है
![उमामी डैशबोर्ड](umamiaddwebsite.png)

संबद्ध सेटिंग्स के साथ cs फ़ाइल:

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

फिर से यह मेरे POCO कॉन्फ़िग सामान का उपयोग करता है ([यहाँ](/blog/addingidentityfreegoogleauth#configuring-google-auth-with-poco)सेटिंग सेटअप करने के लिए )
इसे मेरे प्रोग्राम में सेट करें

```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 on windows ) आप कन्सोल को निम्नलिखित जोड़ सकते हैं

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

## निष्कर्ष

यह सेटअप करने के लिए एक बिट फ़ॉफ था लेकिन मैं-'-मैं परिणाम से खुश हूँ। .-मुझे अब एक स्व-प्रबंधक विश्लेषण सेवा है जो Google या किसी अन्य तीसरे पक्ष को डेटा नहीं देता।