Krótki przewodnik po szablonach niestandardowych

Szablony niestandardowe umożliwiają tworzenie własnych definicji tagów i zmiennych, dzięki czemu inne osoby w organizacji mogą ich używać razem z szablonami wbudowanych tagów i zmiennych. Szablony niestandardowe wymagają uprawnień i działają w trybie piaskownicy, dzięki czemu możesz tworzyć niestandardowe tagi i zmienne w bezpieczniejszy i bardziej wydajny sposób niż w przypadku korzystania z niestandardowych tagów HTML i niestandardowych zmiennych JavaScript.

Szablony niestandardowe tagów i zmiennych są zdefiniowane w sekcji Szablony w Menedżerze tagów Google. Na głównym ekranie Szablony zobaczysz wszystkie szablony tagów i zmiennych, które zostały już zdefiniowane w kontenerze. Na tym ekranie możesz też tworzyć nowe szablony.

Możesz wyeksportować szablon i udostępnić go innym osobom w organizacji. Możesz też tworzyć szablony przeznaczone do szerszej dystrybucji w Galerii szablonów.

Edytor szablonów

Edytor szablonów umożliwia tworzenie i testowanie szablonów niestandardowych oraz wyświetlanie ich podglądu. Ma ona 4 główne obszary danych wejściowych, które pomogą Ci zdefiniować szablon tagu:

  • Informacje – określ podstawowe właściwości szablonu, takie jak nazwa tagu lub zmiennej i ikona.
  • Pola – edytor wizualny, który pozwala dodawać pola do wprowadzania danych w szablonie tagu.
  • Kod – wpisz kod JavaScript działający w trybie piaskownicy, aby określić sposób działania tagu lub zmiennej.
  • Uprawnienia – możesz wyświetlać i ustawiać limity uprawnień tagu lub zmiennej.

Tworzenie pierwszego niestandardowego szablonu tagu

Ten przykład pomoże Ci utworzyć podstawowy przykładowy tag pikselowy. Uruchamianie tego tagu na stronie internetowej przesyła do serwerów dostawcy tagu działanie z prawidłowymi informacjami o koncie.

1. Aby utworzyć pierwszy szablon, kliknij Szablony w panelu nawigacyjnym po lewej stronie, a następnie kliknij przycisk Nowy w sekcji Szablony tagów.

2. Kliknij Informacje i określ Nazwę (wymagane), Opis i Ikona tagu.

Nazwa to wartość, która wyświetli się użytkownikom podczas implementacji tego tagu w interfejsie Menedżera tagów.

Opis to krótki opis funkcji tagu (maksymalnie 200 znaków).

Opcja Ikona pozwala wybrać obraz, który będzie się pojawiać, gdy tag będzie wyświetlany na listach obsługujących właściwość ikony. Obrazy ikon powinny być kwadratowymi plikami PNG, JPEG lub GIF, a ich rozmiar nie może przekraczać 50 kB i mieć co najmniej 64 x 64 piksele.

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

Po prawej stronie pól do wprowadzania danych znajduje się okno Podgląd szablonu. Po każdej zmianie wprowadzonej w edytorze pojawia się przycisk Odśwież. Kliknij Odśwież, aby sprawdzić, jak zmiany wpłyną na wygląd tagu.

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

Na karcie Pola w edytorze szablonów możesz tworzyć i edytować pola w szablonie tagu. Pola służą do wpisywania danych niestandardowych, np. identyfikatora konta. Możesz dodawać do formularza standardowe elementy, takie jak pola tekstowe, menu, przyciski i pola wyboru.

5. Kliknij Dodaj pole i wybierz Wpisywanie tekstu. Zastąp nazwę domyślną (np. "text1") wartością "accountId". W Podglądzie szablonu kliknij Odśwież.

Obok pola będzie widoczna ikona selektora zmiennej (ikona selektora zmiennej). Użytkownicy tego szablonu mogą kliknąć ikonę selektora zmiennej, aby wybrać zmienne 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 opcji dla tego pola. W polu Wyświetlana nazwa wpisz „Account ID” (Identyfikator konta). W Podglądzie szablonu kliknij Odśwież.

Nad polem powinna pojawić się etykieta tekstowa „Identyfikator konta”.

7. Kliknij kartę Kod i wpisz w edytorze kod JavaScript działający w trybie 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 interfejs sendPixel API.

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

Następny wiersz (const account = data.accountId;) otrzymuje wartość accountId, która została utworzona w kroku 5, i zapisuje ją w stałej o nazwie account.

Trzeci wiersz kodu (const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);) konfiguruje stałą url, która łączy stały punkt końcowy adresu URL rejestrujący dane Analytics i zakodowany identyfikator konta, na którym skonfigurowano tag.

W ostatnim wierszu (sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure)) uruchamia się funkcja sendPixel() z wymaganymi parametrami i wysyła żądanie na podany adres URL. Wartości data.gtmOnSuccess i data.gtmOnFailure informują Menedżera tagów Google, kiedy działanie tagu zostało wykonane lub nieudane. Są one następnie używane przez tę usługę na potrzeby takich funkcji jak sekwencjonowanie tagów lub tryb podglądu.

8. Kliknij Zapisz, aby zapisać postępy. Spowoduje to załadowanie wszystkich wykrytych uprawnień do edytora szablonów.

Z niektórymi interfejsami API szablonów są powiązane uprawnienia, które określają, co mogą robić, a czego nie. Jeśli w kodzie używasz interfejsu API szablonów, takiego jak sendPixel, Menedżer tagów wyświetli odpowiednie uprawnienia na karcie Uprawnienia.

9. Kliknij Uprawnienia, aby określić, do jakich domen sendPixel może wysyłać dane. W przypadku pozycji Wyślij piksele kliknij ikonę rozwijania (ikona rozwijania) i wpisz https://endpoint.example.com/ w polu Dozwolone wzorce dopasowania adresu URL.

Jeśli szablon tagu jest skonfigurowany pod kątem wysyłania danych, w powiązanych uprawnieniach musisz określić dozwolony wzorzec dopasowania adresu URL, aby ograniczyć możliwość wysyłania danych. Jeśli adres URL podany w kodzie nie pasuje do dozwolonego wzorca dopasowania adresu URL, wywołanie sendPixel się nie uda.

Wzorzec dopasowania adresu URL musi korzystać z protokołu HTTPS oraz mieć określone wzorce hostów i ścieżek. Host może być domeną (np. „https://example.com/”) lub konkretną subdomeną (np. „https://sub.example.com/”). Ścieżka musi składać się z co najmniej „/”. Użyj gwiazdki (*) jako symbolu wieloznacznego, aby wskazać subdomenę lub wzorzec ścieżki o dowolnej długości (np. „https://\*.example.com/test/”). Gwiazdka to symbol wieloznaczny, który będzie wychwytywał różne możliwe wzorce, np. „\*.example.com/”.\*https://example.com/www.example.comshop.example.comblog.example.comhttps://example.com/\*

W oddzielnych wierszach podaj dodatkowe wzorce dopasowania adresu URL.

10. Kliknij Uruchom kod i poszukaj problemów w oknie Console (Konsola).

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

Tworzenie nowego tagu, który korzysta z nowo zdefiniowanego niestandardowego szablonu tagu, przebiega tak samo jak w przypadku każdego innego tagu:

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

Tworzenie pierwszego szablonu zmiennej niestandardowej

Szablony zmiennych niestandardowych są podobne do szablonów tagów, ale różnią się kilkoma szczegółami:

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

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

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

  • Zamiast kliknąć Tagi > Nowy i utworzyć nową zmienną na podstawie zmiennej niestandardowej, kliknij Zmienne > Nowa.

Pełną instrukcję tworzenia szablonu zmiennej niestandardowej znajdziesz w artykule Tworzenie zmiennej niestandardowej.

Eksportowanie i importowanie

Aby udostępnić szablon niestandardowy w organizacji, możesz go wyeksportować i zaimportować 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ć. Spowoduje to otwarcie szablonu w edytorze szablonów.
  3. Kliknij menu Więcej działań () i wybierz Eksportuj.

Aby zaimportować szablon:

  1. W Menedżerze tagów kliknij Szablony.
  2. Kliknij Nowa. W edytorze szablonów otworzy się pusty szablon.
  3. Kliknij menu Więcej działań () i wybierz Importuj.
  4. Wybierz plik .tpl, który chcesz zaimportować.