# Χρησιμοποιήστε το Umami για τοπική ανάλυση

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

## Εισαγωγή

Ένα από τα πράγματα που με ενοχλούσε σχετικά με την τρέχουσα ρύθμιση μου ήταν ότι έπρεπε να χρησιμοποιήσω το Google Analytics για να πάρω δεδομένα επισκεπτών (όσο λίγα είναι από αυτό ΜSK1Έτσι ήθελα να βρω κάτι που θα μπορούσα να κάνω μόνος μου-host που έφερε't περάσει δεδομένα στο Google ή σε οποιοδήποτε άλλο τρίτο μέλος.τα βρήκα [Ομάμι](https://umami.is/) Αυτό είναι ένα απλό, αυτοΜSK1χρωσμένη λύση ανάλυσης ιστού ΜSK2 Το'χάνει μια μεγάλη εναλλακτική λύση στο Google Analytics και είναι M SK4σε σχέση με το ) εύκολο να εγκαταστήσετε

[TOC]

## Εγκατάσταση

Η εγκατάσταση είναι πάρα πολύ απλή, αλλά πήρε ένα δίκαιο κομμάτι από το fiddling για να πάει πραγματικά...

### Σύνθεση Docker

Καθώς ήθελα να προσθέσω το Umami στο τρέχον μου docker-compose εγκατάσταση χρειαζόμουν για να προσφέρω μια νέα υπηρεσία στο δικό μου `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


```

Αυτό το φάκελο-συνθέτειΜSK1μl αρχείο περιέχει τις ακόλουθες ρυθμίσεις:

1. Μια νέα υπηρεσία που καλείται `umami` Ποιος χρησιμοποιεί το `ghcr.io/umami-software/umami:postgresql-latest` image. Αυτή η υπηρεσία χρησιμοποιείται για την εκτέλεση της υπηρεσίας ανάλυσης Umami.
2. Μια νέα υπηρεσία που καλείται `db` Ποιος χρησιμοποιεί το `postgres:16-alpine` image. Αυτή η υπηρεσία χρησιμοποιείται για την εκτέλεση της βάσης δεδομένων Postgres που το Umami χρησιμοποιεί για να αποθηκεύσει τα δεδομένα του.
   Σημείωση για αυτή την υπηρεσία το χαρτογράφησα σε ένα δελτίο στον διακομιστή μου, έτσι ώστε τα δεδομένα να παραμένουν μεταξύ των επαναφόρων λειτουργιών του .

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

Θα χρειαστείτε αυτό το δελτίο για να υπάρχει και να είναι γραπτό από τον χρήστη docker στον διακομιστή σας ( δεν θα είναι εμπειρογνώμονας Linux έτσι ΜSK2 πιθανότατα θα πεθάνει εδώ

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

3. Μια νέα υπηρεσία που καλείται `cloudflaredumami` Ποιος χρησιμοποιεί το `cloudflare/cloudflared:latest` image. Αυτή η υπηρεσία χρησιμοποιείται για να μετακινήσει την Υπηρεσία Umami μέσω Cloudflare, ώστε να είναι προσβάσιμη από το Διαδίκτυο.

### ΕΝΒ αρχείο

Για να το υποστηρίξω, ενημερώθηκα και για την `.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}
```

Αυτό ρυθμίζει τη διαμόρφωση για την σύνθεση του docker (the `<>` τα στοιχεία προφανώς πρέπει να αντικατασταθούν με τις δικές σας αξίες). `cloudflaredumami` Η υπηρεσία χρησιμοποιείται για να μετακινήσει την Υπηρεσία Umami μέσω του Cloudflare, ώστε να είναι προσβάσιμη από το διαδίκτυο.Είναι δυνατόν να χρησιμοποιηθεί BASE_PATH αλλά για το Umami χρειάζεται ενοχλητικά μια ανασυγκρότηση για να αλλάξει τον βασικό μονοπάτι, οπότε θα ήθελα ότι η ' το αφήνει ως το ρίζα δρόμο για τώραΜSK4

### Τούνελ Cloudflare

Για να εγκαταστήσετε τη σήραγγα cloudflare για αυτό (ο οποίος ενεργεί ως ο δρόμος για το αρχείο js που χρησιμοποιείται για την ανάλυση ΜSK1 getinfo ΜSK2 ΜСК3 Χρησιμοποίησα τον ιστότοπο :

![Τούνελ Cloudflare](umamisetup.png)

Αυτό συντάσσει το τούνελ στην υπηρεσία Umami και επιτρέπει την πρόσβαση από το διαδίκτυο. σημειώσεις, τονίζω αυτό στο `umami` Υπηρεσία στο δοκίμιο-συνθέτει το αρχείο ΜSK1σχεδιάζει αυτόΗ 'σε στο ίδιο δίκτυο με τον σύννεφο που πλημμυρίζει η 'σχει ένα έγκυρο όνομαη ).

### Εισαγωγή στο Umami

Για να ενεργοποιήσετε τη διαδρομή για το σενάριο (called `getinfo` στη ρύθμιση μου πάνω)Αγαπώ'θέτω πρόσθεσε μια εισαγωγή επιβεβαίωσης στις ρυθμίσεις εφαρμογών μου

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

Μπορείτε επίσης να προσθέσετε αυτά στο .env αρχείο σας και να τα μεταφέρετε ως περιβαλλοντικές μεταβλητές στο δοκίμιο-compose αρχείοM SK2

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

Εγκαθιστάτε το WebsiteId στο δίσκο Umami όταν εγκαταστήσετε τον ιστότοπο. (Σημειώστε ότι η προεπιλεγμένη ονομασία χρήστη και κωδικός πρόσβασης για την υπηρεσία Umami είναι `admin` και `umami`, θα πρέπει να αλλάξετε αυτά μετά την εγκατάστασηΜSK1
![Ετικέτες Dashboard](umamiaddwebsite.png)

Με τις συνδεδεμένες ρυθμίσεις cs αρχείο:

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

Και πάλι αυτό χρησιμοποιεί το POCO config stuff ([ΕΔΩ](/blog/addingidentityfreegoogleauth#configuring-google-auth-with-poco)) ανέφερε να εγκαταστήσει τις ρυθμίσεις ΜSK1 ανέφερε
Εγκαταστήστε το στο πρόγραμμά μου.κΜSK1

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

Τελικά στο δικό μου `BaseController.cs` `OnGet` Μέθοδος I've πρόσθεσε το ακόλουθο για να καθορίσει τη διαδρομή για το αναλυτικό σενάριο:

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

Αυτό καθορίζει τη διαδρομή για το αναλυτικό σενάριο που θα χρησιμοποιηθεί στο αρχείο διάταξης.

### Λάιντα αρχεία

Τελικά,Αγαπώ'β προστέθηκε το ακόλουθο στο αρχείο διάταξης μου για να συμπεριλάβει το αναλυτικό σενάριοΜSK2

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

Αυτό περιλαμβάνει το σενάριο στη σελίδα και θέτει τον ιστότοπο ID για την υπηρεσία ανάλυσης.

## Αποκλείστε τον εαυτό σας από την ανάλυση

Για να αποκλείσετε τις δικές σας επισκέψεις από τα δεδομένα ανάλυσης μπορείτε να προσθέσετε την ακόλουθη τοπική αποθήκευση στο πρόγραμμα περιήγησής σας:

Στα εργαλεία του Chrome Dev (Ctrl+ShiftM SK2I στα παράθυραMK3 μπορείτε να προσθέσετε τα ακόλουθα στην κονσόλαΜSK4

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

## Συμπεράσματα

Αυτό ήταν ένα κομμάτι της αμηχανίας για να εγκατασταθεί, αλλά μου άρεσε'μ ικανοποιημένος με το αποτέλεσμα.μ τώρα έχω μια αυτοΜSK2μ υπηρεσία ανάλυσης που δεν'μ διαβιβάζει δεδομένα στο Google ή οποιοδήποτε άλλο τρίτο μέροςμ.μμ ΜSK5μ λίγο από τον πόνο να εγκαθιδρύσει αλλά μόλις αυτόμΜSK6μ έκανεμ 'μ αρκετά εύκολο να χρησιμοποιηθείμSK8μ εμένα ΜSK9μ χαρούμενος με το αποτελέσμα και θα το συνιστούσα σε όποιον ψάχνει για αυτομ μSK10μ αναλυτική λύσημ