Szablony niestandardowe umożliwiają tworzenie własnych definicji tagów i zmiennych, dzięki czemu inne osoby w organizacji będą mogły używać ich razem z wbudowanymi szablonami tagów i zmiennych. Szablony niestandardowe wymagają uprawnień i działają w trybie piaskownicy – dzięki temu 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 ekranie głównym szablonów zobaczysz listę szablonów tagów lub zmiennych, które zostały już zdefiniowane w Twoim kontenerze. Na tym ekranie możesz też tworzyć nowe szablony.
Możesz wyeksportować szablon i udostępnić go innym użytkownikom w organizacji. Szablony możesz opracowywać w szerszej galerii szablonów.
Edytor szablonów
Edytor szablonów umożliwia tworzenie i testowanie szablonów niestandardowych i wyświetlanie ich podglądu. Raport zawiera 4 główne obszary, które mają pomóc Ci zdefiniować szablon tagu:
- Informacje – określ podstawowe właściwości szablonu, np. nazwę tagu lub zmiennej i ikonę.
- Pola – ten edytor wizualny umożliwia dodawanie pól do szablonu.
- Kod – wpisz kod JavaScript w trybie piaskownicy, aby określić działanie tagu lub zmiennej.
- Uprawnienia – możesz wyświetlać i ustawiać limity uprawnień tagu lub zmiennej.
Tworzenie pierwszego szablonu niestandardowego tagu
Ten przykład pokazuje, jak utworzyć podstawowy przykładowy tag pikselowy. Po wywołaniu tego tagu na stronie internetowej przesyła do serwerów dostawcy tagu działanie z odpowiednimi informacjami o koncie.
1. Aby rozpocząć pierwszy szablon, kliknij Szablony w panelu nawigacyjnym po lewej stronie, a potem w sekcji Szablony tagów kliknij przycisk Nowy.
2. Kliknij Informacje i zdefiniuj nazwę tagu (wymagane), Opis oraz ikonę.
Nazwa to nazwa, która będzie wyświetlana użytkownikom wdrażającym ten tag w interfejsie Menedżera tagów.
Opis to bardzo krótki opis (opis o długości maksymalnie 200 znaków).
Ikona pozwala wybrać obraz, który będzie wyświetlany, gdy tag wyświetli się na listach obsługujących właściwość ikony. Obrazy ikon powinny być kwadratowymi plikami PNG, JPEG lub GIF o rozmiarze nieprzekraczającym 50 kB i minimalnym rozmiarze 64 na 64 pikseli.
3. Kliknij Odśwież, by wyświetlić podgląd szablonu.
Po prawej stronie danych wejściowych pojawi się okno Podgląd szablonu. Po każdej zmianie w edytorze pojawi się przycisk Odśwież. Kliknij „Odśwież”, aby sprawdzić, jak zmiany wpływają na wygląd tagu.
4. Kliknij Pola, aby dodać pola do szablonu tagu.
Na karcie Pola w edytorze szablonów możesz tworzyć i edytować pola w szablonie tagów. Pola służą do wpisywania danych niestandardowych, np. identyfikatora konta. Możesz dodać standardowe elementy formularza, takie jak pola tekstowe, menu, przyciski i pola wyboru.
5. Kliknij Dodaj pole i wybierz Wpisywanie tekstu. Zastąp nazwę domyślną (np. "text1") nazwą "accountId". W sekcji Podgląd szablonu kliknij Odśwież.
Obok niego będzie widoczna ikona selektora zmiennych (
Następnym krokiem jest dodanie etykiety do pola:
6. Kliknij ikonę rozwijania (
Nad polem powinna pojawić się etykieta tekstowa „Identyfikator konta”.
7. Kliknij kartę Kod i wpisz kod JavaScript 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 API sendPixel.
Drugi wiersz kodu, const encodeUriComponent =
require('encodeUriComponent'), importuje interfejs API encodeUriComponent.
Następny wiersz (const account = data.accountId;) otrzymuje wartość accountId utworzoną w kroku 5 i zapisuje ją w stałej nazwie account.
Trzeci wiersz kodu, const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);, tworzy stałą url, która łączy stały punkt końcowy URL, który rejestruje dane Analytics, i zakodowany identyfikator konta, z którym skonfigurowano tag.
Ostatni wiersz (sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure)) uruchamia funkcję 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, czy tag zakończył swoje zadanie lub nie udało się go użyć. Menedżer tagów Google używa go do takich funkcji jak sekwencjonowanie tagów i tryb podglądu.
8. Kliknij Zapisz, aby zapisać postęp. Spowoduje to wczytanie wszelkich wykrytych uprawnień do edytora szablonów.
Niektóre interfejsy API szablonów mają przypisane uprawnienia określające, co mogą robić, a czego nie. Gdy użyjesz w kodzie interfejsu API szablonów, np. sendPixel, Menedżer tagów wyświetli odpowiednie uprawnienia na karcie Uprawnienia.
9. Kliknij Uprawnienia, aby określić, do których domen sendPixel może wysyłać dane. We wpisie Wyślij piksele kliknij ikonę rozwijania (https://endpoint.example.com/.
Po skonfigurowaniu szablonu tagu w celu przesyłania danych musisz w odpowiednim uprawnieniu określić dozwolony wzorzec dopasowania adresu URL, by ograniczyć do niego możliwość wysyłania danych. Jeśli adres URL określony w kodzie nie pasuje do dozwolonego wzorca adresu URL, wywołanie sendPixel zakończy się niepowodzeniem.
Wzorzec dopasowania adresu URL musi używać protokołu HTTPS i określać wzorce hostów oraz ścieżek. Hostem może być domena (np. „https://example.com/”) lub konkretna subdomena (np. „https://sub.example.com/”). Ścieżka musi zawierać co najmniej „/”.
Użyj symbolu wieloznacznego (*) jako symbolu wieloznacznego, który będzie miał dowolną długość (np. „https://\*.example.com/test/”). Gwiazdka może zawierać różne wzory, np. „\*.example.com/”, „a” to znak m.
Określ dodatkowe wzorce dopasowania adresu URL w oddzielnych wierszach.
10. Kliknij Uruchom kod i sprawdź, czy w oknie Konsola nie występują 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, który korzysta z nowo zdefiniowanego szablonu niestandardowego tagu, przebiega tak samo jak w przypadku innych tagów:
- W Menedżerze tagów Google kliknij Tagi > Nowy.
- Nowy tag pojawi się w sekcji Niestandardowy w oknie Nowy tag. Kliknij go, aby otworzyć szablon tagu.
- Wypełnij pola wymagane w konfiguracji szablonu tagu.
- Kliknij Reguły i wybierz odpowiednią regułę, która ma uruchamiać tag.
- Zapisz tag i opublikuj kontener.
Tworzenie pierwszego szablonu zmiennej niestandardowej
Szablony zmiennych niestandardowych są podobne do szablonów tagów, ale występują tu pewne istotne różnice:
Szablony zmiennych niestandardowych muszą zwracać wartość.
Zmienne
data['gtmOnSuccess']nie wskazują bezpośrednio realizacji, tylko bezpośrednio zwracają wartość.Szablony zmiennych niestandardowych są używane w różnych częściach interfejsu Menedżera tagów.
Zamiast tworzyć Tagi > Nowa na podstawie zmiennej niestandardowej, wybierz Zmienne > Nowa
Zobacz tworzenie zmiennej niestandardowej, by zapoznać się z pełną instrukcją tworzenia szablonu zmiennej niestandardowej.
Eksportowanie i importowanie
Aby udostępnić szablon niestandardowy organizacji, możesz go wyeksportować i zaimportować do innych kontenerów Menedżera tagów. Aby wyeksportować szablon:
- W Menedżerze tagów kliknij Szablony.
- Kliknij na liście nazwę szablonu, który chcesz wyeksportować. Spowoduje to otwarcie szablonu w edytorze szablonów.
- Kliknij menu Więcej czynności (more_vert) i wybierz Eksportuj.
Aby zaimportować szablon:
- W Menedżerze tagów kliknij Szablony.
- Kliknij Nowa. Spowoduje to otwarcie pustego szablonu w edytorze szablonów.
- Kliknij menu Więcej czynności (more_vert) i wybierz Importuj.
- Wybierz plik
.tpl, który chcesz zaimportować.