Case study - budowa Data Layera i analityki w serwisie B2B Triumph

W idealnym świecie każde wdrożenie analityczne zaczyna się od precyzyjnej dokumentacji Data Layera, którą zespół deweloperski wdraża bezpośrednio w kodzie aplikacji. To idealne rozwiązanie zapewniające najwyższą stabilność. Co jednak zrobić, gdy Twoja firma to globalny gigant, taki jak Triumph, a priorytety systemowe zespołu IT są obecnie inne niż wdrożenie Data Layera.

Przed takim wyzwaniem stanął zespół Triumph B2B. Potrzebowali precyzyjnych danych o sprzedaży i zachowaniach partnerów biznesowych w GA4 "na wczoraj", ale dostęp do zasobów IT był czasowo zablokowany przez krytyczne migracje systemowe.

Wyzwanie firmy

Triumph, światowy lider w branży bielizny, prowadzi szeroką sprzedaż w modelu B2B na wiele rynków zagranicznych. Naszym zadaniem było wdrożenie zaawansowanej analityki z wykorzystaniem Google Analytics 4 (GA4), aby monitorować efektywność sprzedaży, konwersje oraz zachowania partnerów biznesowych. Brak zaawansowanego śledzenia e-commerce oznaczał brak odpowiedzi na kluczowe pytania:
- Jakie warianty kolorystyczne i rozmiary cieszą się największym zainteresowaniem?
- Które linie produktowe najlepiej konwertują w konkretnych regionach?
- W którym momencie koszyka partnerzy B2B porzucają zamówienia?

Zadanie, które przed nami stało to wdrożyć pełne śledzenie GA4 Ecommerce, nie dotykając kodu źródłowego platformy i nie angażując przeciążonego zespołu IT.

Co zrealizowaliśmy

Zamiast czekać, postanowiliśmy wykorzystać Google Tag Manager nie tylko do odpalania tagów, ale jako platformę do wstrzyknięcia inteligentnej warstwy analitycznej. Nasze podejście opierało się na zasadzie, że musimy wyciągnąć jak najwięcej informacji bezpośrednio z dostępnych danych w aplikacji oraz częściowo wykorzystać dane z frontu. Naszym autorskim rozwiązaniem była aplikacja w JavaScript, która stała się pomostem między stanem aplikacji a warstwą danych.

Głęboką integracja z logiką aplikacji Większość prostych wdrożeń opiera się na pobieraniu danych z frontu. To błąd – wystarczy zmiana layoutu lub css, by dane się posypały. Nasz skrypt działa inaczej: wpina się w magazyn danych aplikacji. Dzięki temu, gdy użytkownik dodaje produkt do koszyka, my nie czytamy napisu na buttonie i pobieramy dane z frontu, ale zczytujemy czyste dane prosto z pamięci aplikacji.

Asynchroniczne uzupełnianie danych Często front-end nie wyświetla wszystkich danych (np. ID kolekcji czy sezonu), których wymaga GA4. Nasz skrypt został wyposażony w dodatkowe funkcje. Jeśli w widoku brakuje informacji, skrypt – niezauważalnie dla użytkownika – wysyła w tle zapytanie do API sklepu, pobiera brakujące detale i dopiero wtedy wysyła kompletny raport do Google Analytics.

Automatyczny "Cleaner" danych B2B to różne waluty i formaty cen. Zaimplementowaliśmy moduł, który w locie parsuje ciągi znaków, zamienia przecinki na kropki i standaryzuje dane, eliminując błędy w raportach finansowych.

GTM jako centrum dowodzenia Dzięki wykorzystaniu GTM, stworzyliśmy system wirtualnych zdarzeń. Każda interakcja – od wyświetlenia listy (view_item_list) po finalny zakup (purchase) – jest procesowana przez nasz skrypt i przesyłana do GTM, który pełni rolę tłumacza na standard GA4. Pozwoliło to na pełną kontrolę nad danymi bez konieczności publikowania nowych wersji całego serwisu.

Jako specjaliści zawsze podkreślamy: najlepszą drogą jest wdrożenie Data Layera po stronie IT. Zapewnia to najniższą latencję i najwyższą odporność na zmiany w kodzie front-endu. Jednak w biznesie liczy się Time-to-Market. Nasze rozwiązanie pozwoliło Triumph B2B na zbieranie danych w okresie kiedy nie było możliwości innego rozwiązania. To miesiące danych, które w innym przypadku zostałyby bezpowrotnie utracone.

Efekty

Wdrożenie dla Triumph B2B udowodniło, że technologia w rękach analityków potrafi przełamać biznesowy impas. Zrealizowany projekt przyniósł wymierne korzyści na trzech płaszczyznach.

• Skrócony czas wdrożenia. Dzięki nakładce zaimplementowanej przez GTM udało nam się skrócić czas wdrożenia. Biznes otrzymał dostęp do danych w ciągu kilku tygodni od rozpoczętych prac deweloperskich.
• Jakość danych. Mimo że pominęliśmy warstwę backendową, nie poszliśmy na kompromis w kwestii jakości. Zastosowanie asynchronicznych zapytań API i nasłuchiwania stanu aplikacji (Pinia/Vuex) przyniosło efekty, których nie daje tradycyjne śledzenie. Dzięki walidacji danych przed ich wysyłką do GA4, wyeliminowaliśmy błędy związane z błędnym parsowaniem walut czy duplikowaniem transakcji (częsty problem przy odświeżaniu strony zamówienia).
• Transparentność międzynarodowa Rozwiązanie obsługuje wiele rynków i walut w ramach jednej, uporządkowanej struktury GA4.
  

Podsumowanie

• 0h zaangażowania programistów backendowych przy wdrożeniu eventów e-commerce.
• 100% widoczności lejka zakupowego – od wyświetlenia produktu po finalną transakcję.
• 16+ parametrów dodatkowych przesyłanych przy każdym produkcie, co pozwala na szczegółowę analitykę asortymentu i poszczególnych krajów w GA4.

Twoje IT nie ma czasu? My mamy rozwiązanie. Projekt dla Triumph udowodnił, że ograniczenia technologiczne to często tylko brak odpowiedniego narzędzia. Dzięki zaawansowanemu wykorzystaniu GTM i autorskim skryptom JS, jesteśmy w stanie dostarczyć analitykę, jak przy standardowych wdrożeniach z wykorzystaniem obszaru IT. Chciałbyś sprawdzić, czy u Ciebie również możemy wdrożyć zaawansowany Data Layer bez angażowania programistów? Chętnie przeanalizuję Twój serwis i podpowiem, jak odblokować analitykę w Twoim biznesie.