# 🍪 KOLAČIĆI I PRAĆENJE — UPUTE ZA AKTIVACIJU

Stranica je opremljena **GDPR-kompatibilnim** cookie consent bannerom koji se prikazuje pri prvom posjetu. Posjetitelji mogu odabrati koje vrste kolačića žele dopustiti.

---

## 📋 ŠTO JE VEĆ NAPRAVLJENO

### ✅ Cookie consent banner
- Pojavljuje se 600ms nakon učitavanja stranice (samo prvi put)
- Tri opcije: **Prihvati sve / Odbij sve / Postavke**
- Modal s detaljnim postavkama po kategorijama
- Tipka **"Upravljaj kolačićima"** u footeru za naknadnu izmjenu
- Pamti odabir korisnika u localStorage
- Preveden na **HR / EN / DE**
- Prilagođen za mobitele
- Podržava dark mode
- Pristupačan (ARIA atributi, zatvaranje s ESC tipkom)

### ✅ Tri kategorije kolačića
1. **Nužni** — uvijek aktivni (ne mogu se isključiti)
2. **Analitički** — Google Analytics 4
3. **Marketinški** — Facebook Pixel, Google Ads

### ✅ Google Consent Mode v2
Najnovija verzija koju Google zahtijeva od ožujka 2024. — automatski se aktivira i u "denied" modu prije korisničkog izbora, te ažurira stanje nakon odabira.

---

## 🔧 KAKO AKTIVIRATI PRAĆENJE

### 1. GOOGLE ANALYTICS 4

#### Korak A: Stvorite GA4 account
1. Idite na **https://analytics.google.com**
2. Kliknite **Admin → Create Property**
3. Naziv: **HULA KAMEN**
4. Vremenska zona: **Croatia**
5. Valuta: **EUR**
6. Industrija: **Construction & Building Materials**
7. Pod **"Data Streams"** → kliknite **Web** → unesite vašu domenu (npr. `hulakamen.hr`)
8. Kopirajte **Measurement ID** (izgleda kao `G-XXXXXXXXXX`)

#### Korak B: Zalijepite ID u kod
U sva 3 HTML fajla (**hula-kamen.html**, **hula-kamen-en.html**, **hula-kamen-de.html**) pronađite:

```javascript
const GA_ID='G-XXXXXXXXXX';
```

I zamijenite `G-XXXXXXXXXX` sa svojim stvarnim Measurement ID-em, npr.:

```javascript
const GA_ID='G-A1B2C3D4E5';
```

✅ **Gotovo!** Praćenje se aktivira automatski kad korisnik prihvati analitičke kolačiće.

---

### 2. FACEBOOK PIXEL (META PIXEL)

#### Korak A: Stvorite Pixel
1. Idite na **https://business.facebook.com/events_manager**
2. Kliknite **Connect Data Sources → Web → Meta Pixel**
3. Naziv: **HULA KAMEN Pixel**
4. URL: `https://hulakamen.hr`
5. Kopirajte **Pixel ID** (izgleda kao `1234567890123456` — 16 cifara)

#### Korak B: Zalijepite ID u kod
U sva 3 HTML fajla pronađite:

```javascript
const FB_PIXEL_ID='0000000000000000';
```

I zamijenite `0000000000000000` sa svojim stvarnim Pixel ID-em, npr.:

```javascript
const FB_PIXEL_ID='1234567890123456';
```

✅ **Gotovo!** Pixel se aktivira automatski kad korisnik prihvati marketinške kolačiće.

---

### 3. GOOGLE ADS REMARKETING (opcionalno)

Ako želite voditi kampanje na Googleu:

1. Idite na **https://ads.google.com** i stvorite Google Ads account
2. **Tools & Settings → Audience Manager → Audience Sources → Google Ads tag**
3. Stvorite tag i kopirajte ID (izgleda kao `AW-1234567890`)
4. Dodajte sljedeći kod u JavaScript funkciju `loadFacebookPixel()` ili stvorite novu funkciju i pozovite je u `applyConsent()`:

```javascript
function loadGoogleAds(){
  if(window.gAdsLoaded)return;
  window.gAdsLoaded=true;
  const ADS_ID='AW-XXXXXXXXX'; // Zamijenite stvarnim ID-em
  if(ADS_ID==='AW-XXXXXXXXX')return;
  const s=document.createElement('script');
  s.async=true;
  s.src='https://www.googletagmanager.com/gtag/js?id='+ADS_ID;
  document.head.appendChild(s);
  gtag('config',ADS_ID);
}
```

I dodajte u `applyConsent`:
```javascript
if(prefs.marketing)loadGoogleAds();
```

---

### 4. TIKTOK PIXEL (opcionalno)

Ako planirate oglašavanje na TikToku:

1. Idite na **https://ads.tiktok.com → Assets → Events**
2. Stvorite Pixel i kopirajte Pixel Code (izgleda kao `XXXXXXXXXXXXXXX`)
3. Dodajte funkciju u JavaScript:

```javascript
function loadTikTokPixel(){
  if(window.ttqLoaded)return;
  window.ttqLoaded=true;
  const TT_ID='XXXXXXXXXXXXXXX';
  if(TT_ID==='XXXXXXXXXXXXXXX')return;
  !function(w,d,t){w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"];ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e};ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};ttq.load(TT_ID);ttq.page();}(window,document,'ttq');
}
```

I dodajte u `applyConsent`:
```javascript
if(prefs.marketing)loadTikTokPixel();
```

---

## 📊 KAKO PRAĆENJE FUNKCIONIRA

```
Korisnik dolazi na stranicu
        ↓
Banner se prikazuje nakon 600ms
        ↓
Korisnik bira opciju:
  ├── Prihvati sve → GA4 + FB Pixel se UČITAVAJU
  ├── Odbij sve → Ništa se NE UČITAVA
  └── Postavke → Korisnik odabire kategorije
        ↓
Odabir se sprema u localStorage
        ↓
Pri sljedećem posjetu — banner se NE prikazuje
        ↓
Korisnik može promijeniti odabir
preko "Upravljaj kolačićima" linka u footeru
```

---

## 🛡️ GDPR COMPLIANCE

Trenutni setup ispunjava sve **GDPR zahtjeve**:

✅ **Default denied** — kolačići se ne aktiviraju prije pristanka  
✅ **Eksplicitan pristanak** — korisnik mora kliknuti  
✅ **Granularna kontrola** — može odabrati pojedine kategorije  
✅ **Lako povlačenje pristanka** — preko linka u footeru  
✅ **Nema "dark patterns"** — "Odbij sve" je jednako vidljivo kao "Prihvati sve"  
✅ **Google Consent Mode v2** — pravilna komunikacija s Googleom  
✅ **Pristupačnost** — ARIA atributi, ESC tipka, focus management  

---

## ⚠️ POTREBNE PRAVNE STRANICE

Trebate dodati i sljedeće pravne stranice (link u footeru ili u banneru):

### 1. Politika privatnosti (Privacy Policy)
Mora sadržavati:
- Tko ste vi (HULA KAMEN, OIB, sjedište)
- Koje podatke prikupljate i zašto
- Pravne osnove obrade
- Kako dugo čuvate podatke
- Prava korisnika (pristup, brisanje, ispravak)
- Kontakt za zaštitu podataka
- Popis kolačića koje koristite

### 2. Politika kolačića (Cookie Policy)
Mora sadržavati:
- Što su kolačići
- Koje kolačiće koristite (vlastite + treće strane)
- Trajanje svakog kolačića
- Kako ih upravljati

### 💡 Generatori (besplatni)
- **https://www.iubenda.com** — premium, ali odličan
- **https://www.cookiebot.com** — besplatan plan
- **https://www.privacypolicies.com** — jednostavan generator

---

## 🧪 TESTIRANJE

### 1. Provjerite radi li banner
Otvorite stranicu u **Incognito modu** — banner se mora prikazati.

### 2. Provjerite Google Analytics
1. Otvorite **GA4 → Reports → Realtime**
2. Posjetite svoju stranicu i prihvatite analitiku
3. U realtime dashboardu morate vidjeti svoju aktivnost

### 3. Provjerite Facebook Pixel
1. Instalirajte **Meta Pixel Helper** Chrome ekstenziju
2. Posjetite stranicu i prihvatite marketinške kolačiće
3. Ekstenzija mora prikazati zelenu kvačicu i `PageView` event

### 4. Provjerite GDPR compliance
- **https://www.cookieserve.com** — provjerite koji kolačići se postavljaju prije pristanka
- Ne smije biti GA ili FB kolačića prije nego korisnik klikne "Prihvati"

---

## 📞 TROUBLESHOOTING

**Pixel se ne aktivira:**
- Provjerite jeste li zamijenili placeholder ID
- Otvorite Console (F12) i potražite greške
- Obrišite localStorage: `localStorage.removeItem('hulaCookieConsent')` i osvježite

**Banner se ne prikazuje:**
- Vjerojatno već postoji odluka u localStorage
- Obrišite je preko "Upravljaj kolačićima" ili u DevTools → Application → Local Storage

**Analytics ne pokazuje podatke:**
- Pričekajte 24-48h za prve podatke u standardnom dashboardu
- Realtime mora raditi odmah
- Provjerite blocker (AdBlock blokira GA na vašoj strani)

---

Ako trebate pomoć — javite!