Dodaj Google Tag Manager do WordPress: Łatwy przewodnik integracji
Objaśnienie
Aby dodać Google Tag Manager (GTM) do swojej strony WordPress, musisz wstawić kilka fragmentów kodu do swojego motywu. Dzięki temu GTM będzie mógł skutecznie śledzić i zarządzać tagami na Twojej stronie.
Krok 1: Dodaj GTM do sekcji Head
- Użyj funkcji, aby wstawić skrypt GTM do sekcji head Twojej strony. Zapewnia to wczesne ładowanie skryptu, co jest kluczowe dla śledzenia.
- Funkcja jest podpięta do wp_head, co jest akcją WordPress, która wyprowadza zawartość w sekcji head Twojej strony.
Krok 2: Dodaj GTM do sekcji Body
- Inna funkcja jest używana do dodania tagu noscript tuż po otwierającym tagu body. Jest to zabezpieczenie dla przeglądarek, które mają wyłączony JavaScript.
- Ta funkcja jest podpięta do wp_body_open, co zapewnia, że pojawi się ona natychmiast po otwarciu tagu body.
Ważne: Pamiętaj, aby zastąpić 'GTM-XXXX' swoim rzeczywistym identyfikatorem kontenera GTM. Ten identyfikator jest unikalny dla Twojego konta GTM i jest niezbędny do prawidłowego działania skryptów.
Postępując zgodnie z tymi krokami, zintegrowasz Google Tag Manager z swoją stroną WordPress, co pozwoli Ci zarządzać i wdrażać tagi marketingowe bez bezpośredniej modyfikacji kodu.
Kod
<?php
// Add Google Tag Manager to WordPress
// Hook into wp_head to add the Google Tag Manager script in the head section
function wp_dudecom_add_gtm_head() {
?>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
<?php
}
add_action('wp_head', 'wp_dudecom_add_gtm_head');
// Hook into wp_body_open to add the Google Tag Manager noscript tag immediately after the opening body tag
function wp_dudecom_add_gtm_body() {
?>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php
}
add_action('wp_body_open', 'wp_dudecom_add_gtm_body');
// Note: Replace 'GTM-XXXX' with your actual Google Tag Manager container ID.
?>Instrukcja
Lokalizacja pliku: functions.php lub plik niestandardowej wtyczki.
Wymagania wstępne:
- Dostęp do pliku
functions.phpTwojego motywu WordPress lub pliku niestandardowej wtyczki. - Twój identyfikator kontenera Google Tag Manager (np. GTM-XXXX).
Kroki wdrożenia:
- Dostęp do plików WordPress:
- Zaloguj się do panelu administracyjnego WordPress.
- Przejdź do Wygląd > Edytor motywu, jeśli edytujesz plik
functions.php. - Alternatywnie, użyj klienta FTP lub menedżera plików swojego hostingu, aby uzyskać dostęp do plików motywu lub wtyczki.
- Edytuj plik
functions.phplub stwórz niestandardową wtyczkę:- Jeśli używasz
functions.php, zlokalizuj plik w folderze aktywnego motywu. - Dla niestandardowej wtyczki, stwórz nowy plik PHP w katalogu
wp-content/plugins.
- Jeśli używasz
- Wstaw kod GTM:
- Skopiuj podany fragment kodu i wklej go do pliku
functions.phplub pliku swojej niestandardowej wtyczki. - Upewnij się, że zastąpiłeś
'GTM-XXXX'swoim rzeczywistym identyfikatorem kontenera Google Tag Manager.
- Skopiuj podany fragment kodu i wklej go do pliku
- Zapisz zmiany:
- Jeśli edytujesz przez panel WordPress, kliknij Aktualizuj plik.
- Jeśli używasz FTP lub menedżera plików, zapisz i prześlij plik z powrotem na serwer.
- Zweryfikuj wdrożenie:
- Odwiedź swoją stronę internetową i użyj narzędzi dewelopera przeglądarki, aby sprawdzić, czy skrypt GTM został poprawnie dodany do sekcji head i body.
- Użyj Google Tag Assistant lub podobnego narzędzia, aby upewnić się, że GTM działa poprawnie.
Postępując zgodnie z tymi krokami, pomyślnie zintegrowasz Google Tag Manager z Twoją stroną WordPress. Jeśli potrzebujesz dalszej pomocy lub chcesz zbadać bardziej zaawansowane funkcjonalności, rozważ skontaktowanie się z wp-dude.com w celu uzyskania fachowej pomocy.