Jak dodać Partytown do WordPress: Kompletny przewodnik

Partytown to otwartoźródłowa biblioteka stworzona przez Builder.io, której celem jest przeniesienie ciężkich skryptów stron trzecich do web workerów, co poprawia wydajność witryny. Dzięki temu przewodnikowi dowiesz się, jak krok po kroku dodać Partytown do swojej strony WordPress oraz jak zintegrować różne skrypty analityczne, takie jak Google Analytics 4 (GA4), Matomo i Microsoft Clarity. Przedstawimy również przykłady innych skryptów, które mogą być pomocne.

[ez-toc]

Zalety korzystania z Partytown

• Poprawiona wydajność: Przenosi skrypty do web workerów, odciążając główny wątek.
• Lepsze doświadczenie użytkownika: Szybsze ładowanie strony zwiększa zaangażowanie i retencję użytkowników.
• Skalowalność: Łatwo obsługuje wiele skryptów stron trzecich bez obniżenia wydajności.

Konfiguracja Partytown w WordPress

Krok 1: Dodanie biblioteki wraz z configiem do sekcji head

Aby rozpocząć, musisz załączyć skrypty Partytown w swoim motywie WordPress. W tym celu dodaj poniższy kod do pliku functions.php swojego motywu:

function enqueue_partytown_scripts() {
    // Rejestracja głównego skryptu Partytown
    echo '<script src="/~partytown/partytown.js"></script>';
    echo '<script>
        partytown = {
            "forward": ["dataLayer.push"]
        }
    </script>';
}
add_action('wp_head', 'enqueue_partytown_scripts', 1);

Ten fragment kodu rejestruje główny skrypt Partytown i ustawia konfigurację do przekazywania wywołań dataLayer.push do web workera.

Warto zwrócić uwagę, że nie została do tego wykorzystana funkcja wp_enqueue_script(). Ma to na celu ochronę przed ewentualnymi problemami związanymi z cache.

Krok 2: Dodanie Google Analytics 4 (GA4)

Następnie musisz dodać konfigurację Google Analytics 4 do swojej strony WordPress. Dodaj poniższy kod do pliku functions.php:

function add_ga4() {
    // Dodanie konfiguracji GA4
    $ga4_init = "
    <script async type=\"text/partytown\" src=\"https://www.googletagmanager.com/gtag/js?id=G-0DK4DE7Z41\"></script>
    <script type=\"text/partytown\">
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'G-0DK4DE7Z41');
    </script>
    ";
    echo $ga4_init;
}
add_action('wp_head', 'add_ga4', 5);

Dodawanie innych skryptów analitycznych

Matomo

Matomo (dawniej Piwik) to kolejna popularna platforma analityczna. Aby dodać Matomo do swojej strony WordPress za pomocą Partytown, dodaj poniższy kod do pliku functions.php:

function add_matomo() {
    // Dodanie konfiguracji Matomo
    $matomo_init = "
    <script type=\"text/partytown\">
        var _paq = window._paq || [];
        /* tracker methods like \"setCustomDimension\" should be called before \"trackPageView\" */
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
        (function() {
            var u=\"//your-matomo-domain.com/\";
            _paq.push(['setTrackerUrl', u+'matomo.php']);
            _paq.push(['setSiteId', '1']);
            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
            g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
        })();
    </script>
    ";
    echo $matomo_init;
}
add_action('wp_head', 'add_matomo', 10);

Microsoft Clarity

Microsoft Clarity to narzędzie do analizy zachowań użytkowników. Aby dodać Clarity za pomocą Partytown, dodaj ten kod do pliku functions.php:

function add_clarity() {
    // Dodanie konfiguracji Microsoft Clarity
    $clarity_init = "
    <script type=\"text/partytown\">
        (function(c,l,a,r,i,t,y){
            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
            t=l.createElement(r);t.async=1;t.src=\"https://www.clarity.ms/tag/\"+i;
            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
        })(window, document, \"clarity\", \"script\", \"your-clarity-id\");
    </script>
    ";
    echo $clarity_init;
}
add_action('wp_head', 'add_clarity', 15);

Hotjar

Hotjar to narzędzie do analizy zachowań użytkowników i tworzenia map cieplnych. Aby dodać Hotjar do swojej strony WordPress za pomocą Partytown, dodaj poniższy kod do pliku functions.php:

function add_hotjar() {
    // Dodanie konfiguracji Hotjar
    $hotjar_init = "
    <script type=\"text/partytown\">
        (function(h,o,t,j,a,r){
            h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
            h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};
            a=o.getElementsByTagName('head')[0];
            r=o.createElement('script');r.async=1;
            r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
            a.appendChild(r);
        })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
    </script>
    ";
    echo $hotjar_init;
}
add_action('wp_head', 'add_hotjar', 20);

Facebook Pixel

Facebook Pixel to narzędzie do śledzenia konwersji i remarketingu. Aby dodać Facebook Pixel za pomocą Partytown, dodaj ten kod do pliku functions.php:

function add_facebook_pixel() {
    // Dodanie konfiguracji Facebook Pixel
    $facebook_pixel_init = "
    <script type=\"text/partytown\">
        !function(f,b,e,v,n,t,s)
        {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
        n.callMethod.apply(n,arguments):n.queue.push(arguments)};
        if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
        n.queue=[];t=b.createElement(e);t.async=!0;
        t.src=v;s=b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t,s)}(window, document,'script',
        'https://connect.facebook.net/en_US/fbevents.js');
        fbq('init', 'YOUR_PIXEL_ID');
        fbq('track', 'PageView');
    </script>
    ";
    echo $facebook_pixel_init;
}
add_action('wp_head', 'add_facebook_pixel', 25);

Specjalne przypadki i uwagi

Podczas dodawania Partytown i innych skryptów, warto pamiętać o kilku specjalnych przypadkach i uwagach:

• Kompatybilność skryptów: Nie wszystkie skrypty są w pełni kompatybilne z web workerami. Testuj każdy skrypt dokładnie, aby upewnić się, że działa zgodnie z oczekiwaniami.
• Bezpieczeństwo: Upewnij się, że wszystkie skrypty są serwowane przez HTTPS, aby zapobiec lukom w bezpieczeństwie.
• Cache: Odpowiednio skonfiguruj cache, aby upewnić się, że skrypty nie są ładowane wielokrotnie, co mogłoby negować korzyści związane z wydajnością.

Wdrażanie Partytown

Korzystanie z CDN

Partytown można wdrożyć za pomocą Content Delivery Network (CDN) dla lepszej wydajności i niezawodności. Oto jak to skonfigurować:

phpSkopiuj kodfunction enqueue_partytown_cdn() {
    // Rejestracja głównego skryptu Partytown z CDN
    echo '<script src="https://cdn.jsdelivr.net/npm/@builder.io/partytown@latest/partytown.js"></script>';
    echo '<script>
        partytown = {
            "forward": ["dataLayer.push"]
        }
    </script>';
}
add_action('wp_head', 'enqueue_partytown_cdn', 1);

Hosting na własnym serwerze

Jeśli wolisz hostować Partytown na swoim serwerze, musisz pobrać bibliotekę i umieścić ją w katalogu swojej witryny. Zaktualizuj odpowiednio ścieżkę skryptu:

phpSkopiuj kodfunction enqueue_partytown_local() {
    // Rejestracja głównego skryptu Partytown z lokalnego serwera
    echo '<script src="/path-to-partytown/partytown.js"></script>';
    echo '<script>
        partytown = {
            "forward": ["dataLayer.push"]
        }
    </script>';
}
add_action('wp_head', 'enqueue_partytown_local', 1);

Testowanie i debugowanie

Po zintegrowaniu Partytown i swoich skryptów analitycznych, ważne jest przetestowanie i debugowanie, aby upewnić się, że wszystko działa zgodnie z oczekiwaniami:

• Sprawdź konsolę pod kątem błędów: Użyj narzędzi deweloperskich przeglądarki, aby sprawdzić, czy nie ma błędów skryptów.
• Monitoruj wydajność: Użyj narzędzi do monitorowania wydajności, aby sprawdzić, czy skrypty działają wydajnie.
• Zweryfikuj dane analityczne: Upewnij się, że narzędzia analityczne prawidłowo zbierają i raportują dane.

Wnioski

Integracja Partytown z WordPress może znacznie poprawić wydajność Twojej strony, przenosząc skrypty stron trzecich do web workerów. Dzięki temu przewodnikowi możesz skutecznie dodać Partytown i różne skrypty analityczne do swojej strony WordPress, zapewniając płynne i efektywne działanie. Pamiętaj o dokładnym testowaniu i monitorowaniu wydajności, aby w pełni wykorzystać możliwości tego potężnego narzędzia.

FAQ