Integracja WP Pixel z Google Tag Manager
Uwaga
Poniższa instrukcja składa się z 2 etapów, pierwszy opisuje dodanie podstawowego kodu WP (Skrypt osadzenia, wymagany). Drugi to pełne okodowanie serwisu (W zależności od ustaleń). Zapytaj swojego opiekuna o szczegóły.
Etap 1: Skrypt osadzenia
Krok 1: Wejście do panelu GTM
Zaloguj się na swoje konto Google Tag Manager i wybierz odpowiedni kontener, w którym chcesz umieścić kod.
Krok 2: Dodanie nowego tagu
- Wybierz zakładkę Tags w menu po lewej stronie.
- Kliknij New, aby rozpocząć tworzenie nowego tagu.
- Wprowadź nazwę, np.
WP Pixel, dla łatwej identyfikacji.
Krok 3: Ustawienia tagu
- W sekcji Tag Configuration wybierz typ Custom HTML.
- W polu HTML wklej poniższy kod:
Uwaga
Pamiętaj aby zmienić PIXEL_ID na identyfikator przypisany do Twojego sklepu.
<script>
!function(w,p,e,v,n,t,s){w['WphTrackObject'] = n;
w[n] = window[n] || function() {(w[n].queue=w[n].queue||[]).push(arguments)},
w[n].l = 1 * new Date(), t=p.createElement(e), s=p.getElementsByTagName(e)[0],
t.async=1;t.src=v;s.parentNode.insertBefore(t,s)}(window,document,'script',
'https://pixel.wp.pl/w/PIXEL_ID/tr.js', 'wph');
wph('init', 'PIXEL_ID');
</script>
Krok 4: Wybór momentu uruchomienia
- Kliknij Triggering.
- Wybierz wyzwalacz All Pages, aby kod uruchamiał się na każdej stronie witryny.
Krok 5: Zapis i publikacja
- Kliknij Save, by zachować ustawienia tagu.
- Następnie użyj przycisku Submit, by opublikować zmiany.
Etap 2: Pełne okodowanie serwisu
Uwaga
Niniejsza instrukcja ma charakter poglądowy. Każda konfiguracja serwisu może się różnić, dlatego podczas konfiguracji mogą wystąpić odmienności.
Opis poszczególnych kodów dostępny jest na stronie: Wdrażanie zdarzeń e‑commerce
Krok 1: Kod View
- Aby osadzić poszczególne kody, podobnie jak ze skryptem osadzenia, należy dodać nowy tag: Tags -> New. Wprowadzamy nazwę np.:
WP - View - W sekcji Tag Configuration wybierz typ Custom HTML. W polu HTML wklej poniższy kod:
<script>
wph('track', 'ViewContent', { content_name: 'View' });
</script>
- W sekcji Triggering wybieramy wyzwalacz All Pages
- Zapisujemy zmiany. Ostateczna konfiguracja powinna wyglądać następująco:
Krok 2: Kod ProductList
- Zaczynamy od stworzenia zmiennej. Wchodzimy w zakładkę Variables. W sekcji User-Defines Variables Klikamy New.
- Wybieramy opcję Custom JavaScript, i wklejamy poniższy kod. Na typ etapie wiele zależy od konfiguracji serwisu, zaproponowany kod trzeba potraktowac jako sugestie, którą trzeba zweryfikowac czy działa poprawie.
function(){
var dl = {{ecommerce.impressions}};
var contents = [];
for(var i= 0; i < dl.length; i++){
stock = (dl[i].stocklevel > 0)
contents.push({
id: String(dl[i].id),
name: dl[i].name,
category: dl[i].category,
price: Number(Number(dl[i].price).toFixed(2)),
in_stock: stock
})
}
return contents
}
- Zapisujemy zmiany w Variables i dodajemy nowy Tag i nazywamy go np.:
WP - ProductList - W Custom HTML wklejamy poniższy kod:
<script>
wph('track', 'ViewContent', {
'content_name': 'ProductList',
contents: {{WP ProductList - contents}}
})
</script>
Krok 3: Kod ViewProduct
- Analogicznie do poprzedniego kroku, Tworzymy Variables, Dodajemy Custom JavaScript i wklejamy poniższy kod. Na tym etapie możemy skorzytać z poprzedniego kodu, modifikując go tak aby zwracał informacje o jednym produkcie.
function(){
var dl = {{ecommerce.detail.products}};
var stock = (dl[0].stocklevel > 0)
var contents = [{
id: dl[0].id,
name: dl[0].name,
category: dl[0].category,
price: Number(Number(dl[0].price).toFixed(2)),
in_stock: stock
}];
return contents
}
- Zapisujemy zmiany, tworzymy nowy Tag i nazywamy go np.:
WP - ViewProduct - W Custom HTML wklejamy poniższy kod:
<script>
wph('track', 'ViewContent', {
'content_name': 'ViewProduct',
contents: {{WP ViewProduct - contents}}
})
</script>
Krok 4: Kod AddToCart
- Analogicznie do poprzedniego kroku, Tworzymy Variables, Dodajemy Custom JavaScript i wklejamy poniższy kod. Na tym etapie możemy skorzytać z poprzedniego kodu, modifikując go tak aby zwracał informacje o produktach z koszyka.
function(){
var dl = {{ecommerce.items}};
var contents = [{
id: dl[0].item_id,
name: dl[0].item_name,
price: dl[0].price,
category: dl[0].item_category,
quantity: dl[0].quantity
}];
return contents
}
- Zapisujemy zmiany, tworzymy nowy Tag i nazywamy go np.:
WP - AddToCart - W Custom HTML wklejamy poniższy kod:
<script>
wph('track', 'AddToCart', {
contents: {{WP AddToCart - contents}}
});
</script>
Krok 5: Kod Purchase
- Analogicznie do poprzedniego kroku, Tworzymy Variables, Dodajemy Custom JavaScript i wklejamy poniższy kod. Na tym etapie możemy skorzytać z poprzedniego kodu, modifikując go tak aby zwracał informacje o produktach z Thank you Page.
function(){
var dl = {{ecommerce.items}};
var contents = [];
for(var i = 0; i < dl.length; i++){
contents.push({
id: dl[i].id == undefined? dl[i].item_id : dl[i].id,
name: dl[i].name == undefined? dl[i].item_name : dl[i].name,
price: dl[i].price,
category: dl[i].category == undefined? dl[i].item_category : dl[i].category,
quantity: dl[i].quantity
})
}
return contents
}
- Zapisujemy zmiany, tworzymy nowy Tag i nazywamy go np.:
WP - Purchase - W Custom HTML wklejamy poniższy kod:
<script>
wph('track', 'Purchase', {
transaction_id: {{ecommerce.transaction_id}},
value: {{WP Purchase - value}},
value_gross: {{WP Purchase - value_gross}},
shipping_cost: {{ecommerce.shipping}},
contents: {{WP Purchase - contents}}
});
</script>
Gotowe!
Twój WP Pixel został poprawnie zaimportowany i skonfigurowany 🎉