Setting up and using custom templates in Google Tag Manager (GTM) is a powerful way to enhance your tagging and tracking capabilities, especially if you need functionality that isn’t covered by GTM’s built-in templates. Custom templates allow you to create reusable, standardized setups for tags, triggers, or variables that can be easily deployed and managed across your website. Here’s a step-by-step guide to setting up and using custom templates effectively.
What is Google Tag Manager?
Before diving into custom templates, let’s briefly recap what Google Tag Manager is. GTM is a free tag management solution that enables you to deploy and manage various marketing and analytics tags on your website without needing to modify the code directly. Instead of hardcoding tags (e.g., Google Analytics, Facebook Pixel) into your website, you can manage them via a user-friendly interface.
Benefits of Using Custom Templates in Google Tag Manager
Custom templates are a way to extend the functionality of GTM, allowing users to create reusable setups for specialized tags, triggers, and variables. Here are a few reasons to consider using them:
- Flexibility: You can build a custom solution for tracking events, interactions, or third-party integrations that aren’t supported by GTM’s default templates.
- Standardization: Custom templates ensure consistent implementation across different websites or projects, reducing human error.
- Customization: You can tailor templates to meet the exact requirements of your tracking or tagging needs.
- Ease of Use: After the initial setup, using custom templates can save time in future implementations because they allow for easy customization through simple input fields.
Types of Custom Templates in GTM
There are three primary types of custom templates in GTM:
- Tag Templates: Used to create custom tags that can be reused across various sites.
- Variable Templates: Used to create custom variables that can interact with the GTM environment.
- Trigger Templates: Used to create custom triggers to define specific events that should activate a tag.
Step-by-Step Guide to Setting Up Custom Templates in GTM
1. Accessing the Template Gallery
To create a custom template, follow these steps:
- Open Google Tag Manager and navigate to your container.
- In the left-hand menu, click on Templates. This is where you can manage both tag and variable templates.
- Under the Tag Templates section, click New to create a custom tag template, or under Variable Templates, click New for a custom variable template.
2. Creating a Custom Tag Template
To create a custom tag template, follow these steps:
- Click “New” in the Tag Templates section: This opens the GTM Template Editor.
- Define Metadata: Add a name and description for your tag in the metadata fields. Make sure it’s clear and self-explanatory because this information will help you and others understand what the template does.
- Create Fields for User Input: In the Template Editor, you can define the fields where users will input the tag’s configuration details. For example, if you’re creating a custom tag to fire a tracking pixel, you might create fields for:
- Pixel ID (text input)
- Event type (dropdown)
- Page URL (auto-populated) These fields make it easier to reuse the tag without hardcoding values each time.
- Add Code for the Tag: You can define the JavaScript or HTML code that your custom tag will run. This is where you’ll configure the logic for how the tag interacts with the page or third-party services.
- Use Variables in the code to reference the input fields you defined in the template.
- Use Tag.setHtml() or Tag.setScript() methods to deploy the custom JavaScript/HTML for the tag.
- Add Validation Rules: You can create validation rules to ensure that the inputs are correct before the tag fires. For example, you can ensure that the Pixel ID is in the correct format.
- Testing and Debugging: After defining your custom template, you can use GTM’s Preview and Debug mode to test it. This mode allows you to see how your tag behaves in real-time and catch any errors or misconfigurations before pushing the template live.
3. Creating a Custom Variable Template
Variable templates are created similarly to tag templates, and they can be used to create reusable variables, such as fetching a specific cookie or formatting a timestamp in a certain way.
- Click “New” under Variable Templates.
- Define Input Fields: Like tag templates, you’ll start by defining input fields for users. For instance, if your variable is meant to extract a cookie value, you might include a field for the cookie name.
- Write the JavaScript Logic: In the editor, write the custom JavaScript code that will be executed when the variable is called.
- Example:
var cookieValue = document.cookie.match(new RegExp('(^| )' + {{cookieName}} + '=([^;]+)')); return cookieValue ? cookieValue[2] : '';
- Example:
- Validation Rules: You can set validation rules for the user inputs.
- Testing: Use the Preview and Debug mode to ensure your variable works as expected.
4. Publishing the Template
Once your custom tag or variable template is working as expected in preview mode, you can publish it:
- Click Save on your custom template.
- Navigate back to the main GTM dashboard and submit your changes using the Submit button. This will push the custom template live.
5. Using the Custom Template
Once your template is published:
- Adding the Custom Tag: When creating a new tag in GTM, your custom template will appear alongside the built-in ones (e.g., Google Analytics, AdWords). You can select it and fill in the required fields you defined.
- Using the Custom Variable: Similarly, custom variables will be available when you’re adding or configuring tags.
6. Sharing Your Custom Template
One of the benefits of using GTM custom templates is that you can share them with others. To share your template:
- Export your template: In the Templates section, click on the custom template you’ve created, then select Export. GTM will download the template as a JSON file.
- Share the file: You can share this file with others, who can import it into their own GTM container.
Alternatively, you can publish your template to the Google Tag Manager Community Template Gallery, allowing anyone to search and install your template directly within GTM.
Best Practices for Using Custom Templates
- Document your template well: When you create a custom template, always add a comprehensive description and field names. This ensures that anyone using the template understands its purpose.
- Test rigorously: Ensure that you’ve tested the template thoroughly across different browsers and devices, especially if it contains custom JavaScript or relies on third-party services.
- Version control: Keep track of the versions of your custom templates. If you need to update a template, always create a new version and clearly outline the changes.
- Follow security practices: Avoid allowing user inputs to be directly passed into your custom JavaScript without sanitization. Untrusted user input can lead to potential security vulnerabilities like cross-site scripting (XSS) attacks.
Conclusion
Custom templates in Google Tag Manager are a powerful tool that allows you to create tailored, reusable configurations for your tagging and tracking needs. By creating custom tag, variable, and trigger templates, you can streamline your implementation, ensure consistency, and scale your tagging across different projects. Once you’ve mastered the basics, custom templates can significantly enhance your use of GTM, making your tracking setups more efficient, adaptable, and user-friendly.