Krótki przewodnik po szablonach niestandardowych

W szablonach niestandardowych można tworzyć własne definicje tagów i zmiennych, dzięki czemu inne osoby w organizacji mogą używać ich razem z wbudowanym tagiem szablonów zmiennych. Szablony niestandardowe skoncentrowane na uprawnieniach i działające w piaskownicy umożliwia pisanie niestandardowych tagów i zmiennych w bezpieczniejszym i bardziej wydajnym niż w przypadku niestandardowych tagów HTML i niestandardowych zmiennych kodu JavaScript.

Szablony tagów niestandardowych i zmiennych są zdefiniowane w sekcji Szablony w sekcji Menedżer tagów Google. Na ekranie głównym Szablony zobaczysz listę wszystkich tagów i zmiennych szablonów zdefiniowanych w kontenerze. Możesz też utworzyć nowe szablony z tego ekranu.

Możesz wyeksportować szablon i udostępnić go innym osobom w organizacji. szablonów do szerszej dystrybucji Galeria szablonów.

Edytor szablonów

Edytor szablonów umożliwia tworzenie i testowanie szablonów niestandardowych oraz wyświetlanie ich podglądu. Zawiera 4 główne obszary, w których można wprowadzić dane potrzebne do zdefiniowania szablonu tagu:

  • Informacje – określ podstawowe właściwości szablonu, takie jak tag czy nazwę i ikonę zmiennej.
  • Pola – to edytor wizualny, który umożliwia dodawanie pól do wprowadzania danych do szablonu tagu.
  • Kod – wpisz JavaScript w trybie piaskownicy, aby określić sposób działania tagu lub zmiennej powinno działać.
  • Uprawnienia – wyświetlanie tagu lub zmiennej i ustawianie ograniczeń dotyczących tego, które mogą robić.

Tworzenie pierwszego niestandardowego szablonu tagu

Z tego przykładu dowiesz się, jak utworzyć podstawowy przykładowy tag pikselowy. Kiedy ten tag zostanie uruchomiony na stronie internetowej, prześle działanie z odpowiednim kontem na serwery dostawcy tagu.

1. Aby rozpocząć pierwszy szablon, kliknij Szablony w menu po lewej stronie, a następnie Kliknij przycisk Nowy w sekcji Szablony tagów.

2. Kliknij Informacje i podaj właściwości Nazwa (wymagana), Opis i Ikona.

Nazwa to element, który zostanie wyświetlony użytkownikom podczas implementacji tego tagu w interfejsie Menedżera tagów.

Opis musi być krótki (maksymalnie 200 znaków) z opisem działania tego tagu.

Ikona pozwala wybrać obraz, który pojawi się, gdy tag jest wyświetlany w listy, które obsługują właściwość ikony. Obrazy ikon powinny być kwadratowe w formacie PNG, JPEG lub Pliki GIF o rozmiarze nie większym niż 50 kB i co najmniej 64 x 64 piksele.

3. Aby wyświetlić podgląd szablonu, kliknij Odśwież.

Po prawej stronie danych wejściowych w polach znajduje się okno Podgląd szablonu. Co po wprowadzeniu zmian w edytorze pojawi się przycisk Odśwież. Kliknij Odśwież stronę, aby sprawdzić, jak zmiany wpływają na wygląd tagu.

4. Aby dodać pola do szablonu tagu, kliknij Pola.

Karta Pola edytora szablonów umożliwia tworzenie i edytowanie pól w tagu. szablon. Pola służą do wprowadzania danych niestandardowych, np. identyfikatora konta. Dostępne opcje standardowe elementy formularza, takie jak pola tekstowe, menu, opcje, i pola wyboru.

5. Kliknij kolejno Dodaj pole i Pole tekstowe. Zastąp nazwę domyślną (np. "text1") z "accountId". W sekcji Podgląd szablonu kliknij Odśwież.

Pole będzie miało znaną ikonę selektora zmiennej (ikona selektora zmiennej) obok niej. Użytkownicy tego szablonu mogą kliknąć ikonę selektora zmiennej, aby wybrać zmienne, które są aktywne w tym kontenerze.

Następnym krokiem jest dodanie etykiety do pola:

6. Kliknij ikonę rozwijania (ikona rozwijania) obok pola tekstowego, aby otworzyć więcej dla tego pola. Wpisz „Account ID” (Identyfikator konta). w polu Wyświetlana nazwa. W Podgląd szablonu, kliknij Odśwież.

Etykieta tekstową „Account ID” (Identyfikator konta). powinien pojawić się nad polem.

7. Kliknij kartę Kod i wpisz w edytorze JavaScript w piaskownicy:

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

Pierwszy wiersz kodu, const sendPixel = require('sendPixel'), importuje sendPixel.

Drugi wiersz kodu (const encodeUriComponent = require('encodeUriComponent')) importuje interfejs API encodeUriComponent.

Następny wiersz, const account = data.accountId;, zawiera wartość accountId. utworzona w kroku 5 i zapisana jako stała o nazwie account.

Trzeci wiersz kodu, const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);, ustawia stałą url, która łączy stały punkt końcowy adresu URL, który rejestruje Analytics i zakodowany identyfikator konta, z którym został użyty tag skonfigurowany.

Ostatni wiersz, sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure), działa sendPixel() z wymaganymi parametrami i wysyła żądanie do funkcji pod określonym adresem URL. Wartości data.gtmOnSuccess i data.gtmOnFailure określają, Menedżera tagów Google, gdy wykona działanie tagu lub zakończy się niepowodzeniem, a następnie używane przez Menedżera tagów Google do takich funkcji jak sekwencjonowanie tagów czy trybie podglądu.

8. Kliknij Zapisz, aby zapisać postępy. Spowoduje to wczytanie wszystkich wykrytych uprawnień. w Edytorze szablonów.

Niektóre interfejsy API szablonów mają powiązane uprawnienia, które określają, co mogą, a czego nie mogą zrobić. Jeśli używasz interfejsu API szablonów, takiego jak sendPixel kodu, Menedżer tagów wyświetli odpowiednie uprawnienia na karcie Uprawnienia.

9. Kliknij Uprawnienia, aby określić, jakie domeny może wysyłać sendPixel . Przy pozycji Send Pixels (Wyślij piksele) kliknij ikonę rozwijania (ikona rozwijania). wpisz https://endpoint.example.com/ we Wzorcu dopasowania dozwolonego adresu URL.

Gdy szablon tagu jest skonfigurowany do wysyłania danych, musisz określić Dozwolone Wzorzec dopasowania adresu URL w ramach powiązanego uprawnienia, aby ograniczyć zakres, w którym dane który ma być wysłany. Jeśli URL podany w kodzie nie pasuje do dozwolonego adresu URL zgodne ze wzorcem, wywołanie sendPixel zakończy się niepowodzeniem.

Wzorzec dopasowania adresu URL musi korzystać z protokołu HTTPS, mieć określonego hosta i wzorce ścieżek. host może być domeną (np. „https://example.com/”) lub określoną subdomeną (np. „https://sub.example.com/”). Ścieżka musi zawierać co najmniej „/”. Użyj gwiazdki (*) jako symbolu wieloznacznego, aby wskazać subdomenę lub wzorzec ścieżki dowolnej długości (np. „https://\*.example.com/test/”). Gwiazdka to symbol wieloznaczny który będzie wychwytywać różne wzorce, np. „\*.example.com/” pasują do www.example.com, shop.example.com, blog.example.com itd. Gwiazdka musi być poprzedzona odwróconym ukośnikiem znak: „\*”. Adres URL bez dodatkowych znaków (np. Wartość „https://example.com/”) jest traktowana jako końcowa symbolem wieloznacznym (odpowiednik „https://example.com/\*”.

Podaj dodatkowe wzorce dopasowania adresu URL w osobnych wierszach.

10. Kliknij Uruchom kod i sprawdź, czy w oknie Konsola nie występują żadne problemy.

Wszystkie wykryte błędy pojawią się w oknie Konsola.

11. Kliknij Zapisz i zamknij Edytor szablonów.

Szablon tagu powinien być gotowy do użycia.

Użyj nowego tagu

Proces tworzenia nowego tagu z wykorzystaniem nowo zdefiniowanego niestandardowego szablonu tagu działa tak samo jak każdy:

  1. W Menedżerze tagów Google kliknij Tagi > Nowy.
  2. Nowy tag pojawi się w sekcji Niestandardowe w oknie Nowy tag. Kliknij ją, aby otworzyć szablon tagu.
  3. Wypełnij wymagane pola konfiguracji szablonu tagu.
  4. Kliknij Reguły i wybierz odpowiednią regułę, gdy tag powinien zostać uruchomiony.
  5. Zapisz tag i opublikuj kontener.

Tworzenie pierwszego szablonu zmiennej niestandardowej

Szablony zmiennych niestandardowych są podobne do szablonów tagów, z kilkoma ważnymi różnice:

  • Szablony zmiennych niestandardowych muszą zwracać wartość.

    Zamiast wywoływać data['gtmOnSuccess'] w celu wskazania ukończenia, zmienne zwracają wartość bezpośrednio.

  • Szablony zmiennych niestandardowych są używane w różnych częściach Menedżera tagów Interfejs.

  • Zamiast otwierać stronę Tagi > Nowa, by utworzyć nową zmienną na podstawie kliknij menu Zmienne > Nowość

Pełną instrukcję tworzenia zmiennej niestandardowej znajdziesz w artykule o tworzeniu zmiennej niestandardowej. szablon.

Eksportowanie i importowanie

Aby udostępnić w organizacji szablon niestandardowy, możesz wyeksportować szablon niestandardowy i zaimportuj go do innych kontenerów Menedżera tagów. Aby wyeksportować szablon:

  1. W Menedżerze tagów kliknij Szablony.
  2. Kliknij na liście nazwę szablonu, który chcesz wyeksportować. Dzięki temu otwórz szablon w Edytorze szablonów.
  3. Kliknij menu Więcej czynności () i wybierz Eksportuj.

Aby zaimportować szablon:

  1. W Menedżerze tagów kliknij Szablony.
  2. Kliknij Nowa. Spowoduje to otwarcie pustego szablonu w Edytorze szablonów.
  3. Kliknij menu Więcej czynności () i kliknij Importuj.
  4. Wybierz plik .tpl, który chcesz zaimportować.