Przez ostatnie kilka miesięcy pisałem sobie rozszerzenie do #chrome, które wizualizuje dane o klikniętych na stronie elementach - tzw "heatmapa", czy też "clickmapa".
Była to okazja żeby mieć sporo niecodziennych wyzwań do rozwiązania, i pomyślałem że się nimi podzielę. Ponieważ sporą część tego co musi być zrobione miałem w głowie i nie porywało mnie robienie jej, do stworzenia części kodu użyłem #chatgpt i #github #copilot , co też przyniosło ciekawe doświadczenia.
Są to totalnie geekowskie wynurzenia ale mam nadzieję znaleźć odrobinę przestrzeni gdzie mógłbym też zyskać może jakiś feedback na temat tego rozwiązania
Całość opiera się na zbieraniu selektorów CSS klikniętych elementów, a później pobieraniu tych danych i wizualizowaniu ich.
- Sama komunikacja z zewnętrznym serwisem w Chrome Extensionie to już jest ciekawy fikoł, bo można to robić tylko z konkretnego kontekstu - service workera (a.k.a. background.js) - wymaga to przerzucania danych w odpowiednie miejsce (np. do otwartego taba przeglądarki), bo nie można ich pobrać "gdzie się chce"
- Wizualizacja klikniętych elementów to fragment w którym mocno wspomagałem się AI - ChatGPT dobrze był w stanie zrozumieć o co mi chodzi i uwzględnić wymagania, ale jego sposób pracy potrafił się wahać z tygodnia na tydzień. W końcu przerzuciłem się na GitHub CoPilot ponieważ sugeruje na podstawie całego otwartego w #vscode projektu i bieżącego miejsca w kodzie. Czasem jak kulą w płot, ale zaoszczędził mi mnóstwo czasu. W sumie cały algorytm wizualizacji to jego dzieło którego staram się sam nie ruszać
jedną z rzeczy, które AI rozwiązało jest kolejność renderowania elementów na podstawie sprawdzenia, który jest czyim dzieckiem, tak, aby nie było później zwizualizowanych elementów, których nie da się kliknąć.
- Największym problemem, nad którym dumałem jak memiczny Pablo Escobar przez 1,5 miesiąca odkładając całość w kąt, było jak skonstruować toolbar wyświetlający się po kliknięciu danego elementu. No nie mogłem tego sobie dobrze wymyśleć biorąc pod uwagę to co chciałem zrobić, czyli doklejać go do już istniejącego elementu i pozwalać mu się rozwijać na obszar poza tym elemente. Z pomocą też pewnego wieczora przyszło AI, ale do rozwiązania o co je poprosić musiałem dotrzeć sam.
- Nadawanie odpowiedniej kolorystyki w zależności od ilości kliknięć na dany element jest czymś co muszę jeszcze dopracować. Pierwsza wersja opierała się na przypisaniu natężenia jednego koloru, teraz już mam 2 kolory. Wymyśliłem sobie żeby dzielić skalę pomiedzy tymi 2 kolorami na liczbę kolorów odpowiadającą ilości elementów do pokolorowania, ale to nie daje wyraźnych wizualnie efektów, więc wprowadziłem dodatkowy model który elementy z największą ilością kliknięć doboostowuje na podstawie tego, które mają miejsce w datasecie (bo jest on posortowany od najbardziej klikanych elementów)
- Potrafią się też zdarzać uszkodzone dane z niewłaściwymi, urwanymi selektorami CSS - trzeba je w miarę możliwości oczyszczać i wizualizować na najbliższym elemencie
- Niektóre elementy na stronach, gdy są kliknięte, potrafią zwracać inne selektory np zawierające klasę "active". Żeby te dane łączyć (chociaż chyba mi to jeszcze nie do końca działa
) też zrobiłem dedykowaną temu funkcjonalność.
- Problem, którego jeszcze nie rozwiązałem: przy używaniu google translate, mogą się zmieniać wykrywane selektory CSS klikniętych elementów, bo jest w nich dodatkowo umieszczany tag <font> albo i dwa
- Popełniłem też sporo mniejszych, czeskich błędów przy obsłudze dość złożonego API - tym lepiej miałem okazję się go nauczyć
- GitHub CoPilot dobrze się u mnie zadomowił. Zrobiłem kilka zrzutów które chcę zmontować w filmik o nim, gdzie mam przykłady i dobrych i kiepskich jego zachowań. Czasem trzeba go lekko szturchnąć w odpowiednim kierunku, i potrafi dużo pomóc, ale czasem jest zupełnie bezużyteczny i kręci się w kółko jak 5 latek
No i taka robota. Mi się bardzo przyda w mojej codziennej pracy. Jak coś, to extension współpracuje z analityką Piwik PRO, która ma dwie zalety - jest robiona w Polsce i jest darmowa do 500 tys. eventów miesięcznie ( ͡° ͜ʖ ͡°) #toniejestreklama, może się komuś przyda, a samo rozszerzenie tu: https://logbaker.com, a filmik mam nadzieję że się osadzi: https://www.youtube.com/watch?v=wJSYjGRO5YM
Jeśli ktoś ma pytania dot. developmentu chrome extensiona też chętnie odpowiem na tyle ile wiem
@gonerator dla kogo zbierasz te dane?
@em-te dla właścicieli różnych stron internetowych - prywatnych firm
całkiem ciekawe wyzwanie
pytanie zasadnicze: co cię motywowało do tworzenia własnego rozwiązania?
Gotowych rozwiązań do heatmap było sporo (nie robię w tej branży od wielu lat, toteż na bieżąco już nie jestem) i głównym problemem była ich ociężałość. Ale nie wspomniałeś o gotowcach w ogóle, toteż jestem ciekaw czy krojenie żadnego gotowca nie byłoby "bardziej".
Druga rzecz to selektory.
Jak zbierasz dane dot. selektorów obejmujących całą szerokość lub wysokość widocznego
obszaru (nie wiem jak się tłumaczy viewport)?
@VonTrupka motywacja do stworzenia własnego rozwiązania była taka, że już tej platformy używałem, a rozwiązanie w niej zawarte nie było wystarczające. A nie chciałem do samych heatmap zaprzęgać zawsze kolejnego rozwiązania, skoro to już mam działające. Oczywiście, jest wiele rozwiązań, ale każde ma swoje wady i zalety oraz koszty. A tutaj wiem dokładnie jakie dane przetwarzam i co chcę z nimi zrobić
Jest jeszcze aspekt prywatności przetwarzania danych - dla wielu firm istotny - a przy niektórych rozwiązaniach potrafi to być bardzo niejasne (patrz: MS Clarity). Piwik ma to dobrze ograne dzięki anonimizacji.
Co do selektorów - jeśli element ma całą wysokość lub szerokość viewportu, to jest zbierany tak samo (np body) - i na nim też są wizualizowane kliknięcia, najczęściej te nieintencjonalne - jeśli dobrze rozumiem o co pytasz
@gonerator
założyłem defaultowo self hosted rozwiązania, chmurowatość to dla mnie ostateczność
przy czym i tak prędzej odpuściłbym 3rd party hosted niż go użył
tzn ogólnie rzecz biorąc i afair liczone były współrzędne kursora podczas wywoływania eventu i normalizowane względem - hgw, jak to określić - rozmiarów strony lub głównego kontenera.
I tutaj pytanie moje dotyczyło selektora elementu który ma dużą szerokość lub wysokość a jest w zasadzie pusty. No jeszcze wypadałoby uściślić jakiego typu selektory i czy są unikatowe, bo w przypadku klas to odróżnienie klikniętego elementu tylko na tej podstawie byłoby ... trudne
takie tam moje geekowskie dywagacje ( ͡~ ͜ʖ ͡°)
@VonTrupka aaa, rozumiem chyba lepiej o co Ci chodzi - nie jest uzywana sama klasa tylko budowana cała ścieżka, która jest unikalna dla tego elementu - może iśc aż z body przez jakieś :nth-childy i znajdywać ten element. Oczywiście klasy i IDki też są wykorzystywane jeśli są obecne. Współrzędne nie są zbierane, poziom abstrakcji jest na całym elemencie. To jest właśnie przerażające w niektórych rozwiązaniach - z jaką gęstością i dokładnością zbierają dane. W/g mnie należy w tym zachować jakiś umiar.
A jak self-hosted to Matomo można ( ͡° ͜ʖ ͡°) dzięki za Twoje rozważania, fajnie że CIę to jakoś zainteresowało
>To jest właśnie przerażające w niektórych rozwiązaniach - z jaką gęstością i dokładnością zbierają dane. W/g mnie należy w tym zachować jakiś umiar.
@gonerator najbardziej przerażająca to jest zasobożerność takich rozwiązań
w życiu odpaliłem może ze 2 razy heatmapy gdy chciałem zebrać trochę info podczas wdrażania serwisu miejskiego
od razu duszno się zrobiło w pomieszczeniu jak wszystkie wiatraki w workstation zaczęły mielić (´･ᴗ･ ` )
mam nadzieję że przez bodaj 2-3 dni nie roztopiło nikomu lapka
@VonTrupka To prawda, samo przetrzymywanie tych ilości danych to wyzwanie ;) nie mówiąc już o rejestrowaniu. A jeśli dobrze rozumiem wspomniałeś o rozwiązaniach self hosted, które potrafią robić heatmapy? Podzielisz się jakimiś nazwami? Ja znam tylko Matomo, no jeszcze Umami i chyba Countly można postawić ale nie kojarzę żeby coś self hosted miało heatmapy oprócz Matomo?
@gonerator coś takiego jak heatmap.js musiało ci się obić o oczy
do tego hotjar - to dopiero była nagrzewnica do serwerów (´･ᴗ･ ` )
o piwiku wspominałeś, również wprzęgałem moduł heatmaps gdy wyszedł, trochę koślawo to działało na początku, ale dało się zebrać wystarczająco danych. A z piwika korzystałem chyba od samego startu.
Teraz widzę że już dawno projekt przeobraził się w matomo.
nie dam sobie ręki uciąć, bo już nie pamiętam, ale może jeszcze clicktale użyłem
wszystkie te usługi na przestrzeni czasu mogły ewoluować do chmurowatych, toteż nie potrafię określić czy wciąż są dostępne wersje self hosted w choć ograniczonej wersji za friko
Komentarz usunięty
Zaloguj się aby komentować