Analityka AskSpot na Shopify: storefront i checkout

To uzupełnienie głównego poradnika: nasłuch czatu AskSpot w Google Analytics – zacznij od niego, żeby ogarnąć zdarzenia widgetu, most do dataLayer oraz konfigurację GTM i GA4. Tutaj opisujemy tylko to, co jest specyficzne dla Shopify.

Storefront (strona główna, kategorie, karty produktu)

Zwykły przypadek. Ładujesz widget przez GTM albo przez motyw (theme.liquid), most przez GTM. Wszystko z głównego poradnika GA4 działa bez zmian.

Checkout – trzy fakty, które trzeba znać

• Fakt 1: Custom Pixel działa w sandboxie. Shopify uruchamia Custom Pixele w izolowanym iframe (Web Pixels API), bez dostępu do DOM strony checkoutu. Konsekwencja: skrypt się załaduje, ale widget się nie wyrenderuje. To nie błąd – tak działa Shopify.
• Fakt 2: warstwa analityczna może działać. Nasz skrypt oprócz okna czatu dogrywa logikę analityczną. W sandboxie widget nie ma gdzie się narysować, ale część analityczna ma szansę działać – może nasłuchiwać zdarzeń Shopify (m.in. checkout_completed) i wysyłać konwersję do naszego API.
• Fakt 3: dostęp do pamięci rozmowy jest do przetestowania. Pamięć rozmowy trzymamy w ukrytej ramce czatu (iframe). Ponieważ checkout działa zwykle na subdomenie tej samej domeny głównej co sklep, przeglądarka traktuje go jako tę samą witrynę i rozmowa rozpoczęta na storefroncie powinna być tam widoczna. Ale mocno odizolowany sandbox Custom Pixela może ten mechanizm uciąć.

Kod dla Custom Pixel

const ASKSPOT_SCRIPT_SRC =
  'https://chat.askspot.io/api/v1/integration/{TWOJE_ID_INTEGRACJI}/embed-script';

let askSpotLoaded = false;

function loadAskSpot() {
  if (askSpotLoaded) return;
  askSpotLoaded = true;
  const script = document.createElement('script');
  script.async = true;
  script.crossOrigin = 'anonymous';
  script.src = ASKSPOT_SCRIPT_SRC;
  document.head.appendChild(script);
}

const getCookiebotConsent = async () => {
  try {
    const cookieString = await browser.cookie.get('CookieConsent');
    if (!cookieString) return null;
    return {
      marketing:   cookieString.includes('marketing:true'),
      statistics:  cookieString.includes('statistics:true'),
      preferences: cookieString.includes('preferences:true')
    };
  } catch (e) {
    return null;
  }
};

async function loadAskSpotIfAnalyticsConsentGranted() {
  const consent = await getCookiebotConsent();
  if (consent?.statistics) loadAskSpot();
}

analytics.subscribe('checkout_started', () => {
  loadAskSpotIfAnalyticsConsentGranted();
});

GTM czy Custom Pixel na checkoucie?

	GTM	Custom Pixel
Działa na checkoucie Shopify	tylko z Checkout Extensibility (Shopify Plus / nowy checkout)	✓ zawsze
Zgody	✓ z Consent Mode, jedno miejsce	ręcznie, parsowanie cookie
Dostęp do zdarzeń Shopify (checkout_completed)	pośrednio przez dataLayer	✓ natywnie przez analytics.subscribe
Izolacja	brak	sandbox – brak DOM, możliwe utrudnienia w dostępie do pamięci rozmowy
Adblocki	⚠ blokują gtm.js	mniej podatny

Zalecana kolejność działań:

1. Storefront przez GTM (zgody, jedno miejsce, cała ścieżka). Usuń skrypt z frontendu, żeby nie dublować.
2. Poproś AskSpot o ukrycie dymka na koszyku i checkoucie – nie kombinuj z warunkowym ładowaniem.
3. Checkout: najpierw sprawdź, czy w ogóle potrzebujesz Custom Pixela. Jeśli konwersje mają lecieć do API AskSpot, a nie do Twojego GA4 – ustal z nami, czy nie wystarczy wariant server-side (atrybucja, poziom 3).
4. Jeśli Custom Pixel jest potrzebny – wdroż na testowym pixelu / testowym sklepie, zweryfikuj punkty z checklisty, dopiero potem produkcja.

Tryby wyświetlania i pełny obraz integracji znajdziesz w integracji z Shopify. Aby podłączyć dane o zamówieniach (status zamówienia w czacie), zobacz jak połączyć Shopify z AskSpot.