Jeden skript na každé stránce

1. 1V aplikaci vytvoř projekt pro svůj web. Dostane ID projektu ve tvaru conseto_tvojweb_abc123_def4.
2. 2Otevři „Nastavenia“, potom „Inštalácia“ (aplikace zatím mluví slovensky a anglicky, proto názvy obrazovek píšeme tak, jak je uvidíš). Skript tam už má tvoje ID a tlačítko ke zkopírování.
3. 3Vlož ho jednou do každé stránky, co nejvýše v <head>.

To je celá instalace. ID nahraď svým.

<link rel="preconnect" href="https://api.conseto.io">
<script>
  window.dataLayer = window.dataLayer || [];
  window.gtag = window.gtag || function () { dataLayer.push(arguments); };
  gtag('consent', 'default', {
    ad_storage: 'denied', ad_user_data: 'denied',
    ad_personalization: 'denied', analytics_storage: 'denied',
    wait_for_update: 500
  });
  window.consetoQ = window.consetoQ || [];
  consetoQ.push(['init', { clientId: 'conseto_xxx_xxx' }]);
</script>
<script async src="https://www.conseto.io/dist/conseto.min.js"></script>

Skript se načte bez čekání (async), proto volání před jeho načtením jdou do fronty: consetoQ.push(['track', 'cta_click']). Fronta zná metody init, track, updateConsent, showBanner, hideBanner, openCookieSettings, clearConsent, setUserId, setUserEmail, setUserProperty, setUserProperties, clearUser a clearUserProperties. Stránky se starším, synchronním skriptem fungují dál.

Čisté HTML nebo vlastní šablona

Vlož skript co nejvýše v hlavičce šablony, kterou používá každá stránka.

WordPress

Stáhni si náš plugin v aplikaci („Nastavenia“, „Inštalácia“), nahraj ho v části Pluginy, Přidat plugin, Nahrát plugin, aktivuj ho a v jeho nastavení vlož ID projektu. Pokud chceš posílat nákupy a vrácení z WooCommerce ze serveru, vlož tam i API klíč. Bez pluginu vlož skript do souboru header.php své šablony co nejvýše v hlavičce. Plugin není na wordpress.org.

Shopify

Aplikace v Shopify App Store zatím není. V administraci Shopify otevři Online obchod, Motivy, Upravit kód, otevři soubor theme.liquid a vlož skript co nejvýše v hlavičce.

Next.js

Skript načti přes next/script a funkci init zavolej v onLoad. Takhle ho načítá conseto.io.

Jednostránkové aplikace

Vlož značku skriptu do hlavní HTML šablony aplikace a init zavolej jednou. Skript sleduje změny stránky přes historii prohlížeče i tlačítko zpět, takže započítá každou stránku, kterou návštěvník uvidí. Otestovali jsme Next.js (tento web); u jiných frameworků je to ten samý skript a nic víc.

Google Tag Manager

Conseto umí načíst tvůj kontejner GTM za tebe: přidej jeho ID do funkce init a kód kontejneru už nevkládej podruhé. Vložení skriptu Conseto do GTM jako vlastní HTML značky jsme netestovali, proto ho nedoporučujeme.

Google Analytics 4

ID měření zadej v nastavení projektu v aplikaci nebo ho pošli do funkce init jako v ukázce. Skript načte GA4 a Google Consent Mode ho drží potichu, dokud se návštěvník nerozhodne.

"use client";

import Script from "next/script";

declare global {
  interface Window {
    Conseto: { init: (config: { clientId: string }) => Promise<unknown> };
  }
}

// Next.js inlines NEXT_PUBLIC_* at BUILD time: set it in the hosting project
// before the build, or every visitor gets undefined.
const CLIENT_ID = process.env.NEXT_PUBLIC_CONSETO_CLIENT_ID;

export function ConsetoInit() {
  if (!CLIENT_ID) return null;

  return (
    <Script
      src="https://www.conseto.io/dist/conseto.min.js"
      strategy="afterInteractive"
      onLoad={() => {
        void window.Conseto.init({ clientId: CLIENT_ID });
      }}
    />
  );
}

<script src="https://www.conseto.io/dist/conseto.min.js"></script>
<script>
  Conseto.init({
    clientId: 'conseto_xxx_xxx',
    gtm: 'GTM-XXXXXXX'
  });
</script>

<script src="https://www.conseto.io/dist/conseto.min.js"></script>
<script>
  Conseto.init({
    clientId: 'conseto_xxx_xxx',
    ga4: 'G-XXXXXXXXXX'
  });
</script>

1. 1Otevři svůj web v běžném okně prohlížeče. Při první návštěvě se ukáže cookie banner, pokud jsi neotevřel odkaz s vlastními návštěvami nebo pokud země návštěvníka banner nevyžaduje (viz stránka o cookie banneru).
2. 2V aplikaci „Nastavenia“, „Inštalácia“ každých 5 sekund kontroluje, jestli přicházejí události, a první návštěvu ukáže do minuty.
3. 3Použij kontrolu webu na stejné stránce: aplikace otevře tvou adresu jako běžný návštěvník a řekne, co chybí (stránka se načetla, je na ní skript, spustil se, posílá data, data patří tomuto projektu, banner se ukázal). Samotná kontrola se do tvých čísel nezapočítá.