Tags
Google Tag Manager
Use this IntegrationGoogle Tag Manager
Overview
Google Tag Manager is a free tool that allows you to add or change tracking on a website or application without needing to rely on development resources. Now, you can also use it with Feathery forms.
What you need
- An active Feathery account and form
- A Google Tag Manager account
What is Google Tag Manager?
Google Tag Manager (GTM) is a free tag management system provided by Google that allows website owners and marketers to manage and deploy tracking tags (snippets of code) on their websites or mobile apps without the need for manual coding. It simplifies the process of implementing and managing various marketing and analytics tags, such as Google Analytics, Facebook Pixel, AdWords Conversion Tracking, and many others.
Key Features of Google Tag Manager:
- Tag Management: Google Tag Manager enables users to manage all their tags in one centralized platform. Instead of manually adding and updating tags directly into the website's source code, users can manage tags within the GTM interface.
- Tag Templates: GTM provides a library of tag templates for popular marketing and analytics tools, making it easy to add new tags without writing custom code. Users can choose from a variety of pre-built tag templates and configure them according to their requirements.
- Version Control: GTM offers version control features that allow users to create and manage multiple versions of their tag configurations. Users can preview changes, test new configurations, and publish updates without affecting the live website.
- Trigger Configuration: GTM uses triggers to determine when tags should be fired or executed. Users can create triggers based on specific events, such as page views, clicks, form submissions, and more. Triggers help ensure that tags are fired at the right time and under the right conditions.
- Variable Management: GTM supports the use of variables, which are placeholders for dynamic values that can be reused across tags and triggers. Users can create custom variables to capture data from the website, such as page URLs, user interactions, and custom dimensions.
- Built-in Debugging Tools: GTM includes built-in debugging tools that help users troubleshoot and validate their tag configurations. Users can preview tags, test triggers, and debug issues in real-time to ensure that tags are working correctly.
- Integration with Google Services: GTM seamlessly integrates with other Google services, such as Google Analytics, Google Ads, and Google Optimize. Users can easily add and configure tags for these services directly within the GTM interface.
- User Permissions: GTM allows users to set granular permissions and access controls for team members, ensuring that only authorized users can make changes to tag configurations and publish updates.
Common Use Cases for Google Tag Manager:
- Web Analytics: Implementing tracking tags for web analytics tools such as Google Analytics, Adobe Analytics, or Mixpanel.
- Conversion Tracking: Tracking conversions and goals, such as form submissions, purchases, or downloads, for marketing campaigns.
- Remarketing: Deploying remarketing tags to target users with personalized ads based on their behavior on the website.
- Event Tracking: Tracking user interactions and events, such as clicks, video views, or scroll depth, to gain insights into user behavior.
- A/B Testing: Integrating tags for A/B testing tools like Google Optimize or Optimizely to conduct experiments and optimize website performance.
Overall, Google Tag Manager provides website owners and marketers with a powerful and user-friendly platform for managing and deploying tracking tags, streamlining the process of tracking website activity and gathering valuable insights for optimization and decision-making.
Video tutorial
How to set up
Open Tag Manager, and copy your Google Tag Manager Container ID to your clipboard (Ctrl+C). Here’s where you’ll find that ID:
.svg)
Navigate to the Feathery form that you want to track. Click on the Integrations tab.
.svg)
Find the Google Tag Manager integration, and paste in your container ID.
.svg)
Click Save, and you’re now ready to track using Tag Manager.
Set up tags
Simply adding Tag Manager to your form won’t do anything until you’ve set it up. Here’s a simple example of the process – adding Facebook Pixel to Tag Manager. For more on setting up Tag Manager, see Google’s documentation.
To create a tag, click Add a new tag:
Now a configuration menu will appear:
Click anywhere on Tag Configuration to bring up the tag type menu. You can choose from all kinds of Google products, including Analytics, plus a ton of ready-made tags for other tracking software.
Facebook Pixel is not included, so we need to choose Custom HTML.
Grab your Facebook Pixel code from Events Manager.
.svg)
Paste the code into the HTML field.
.svg)
Next, we need to set up the tag event trigger. Click the Triggering field to open up the Choose a trigger menu. We’ll go for Page View as an example. Click that to be taken back to the tag configuration interface.
.svg)
Now click Save. You've successfully set up Pixel in Tag Manager, so you’ll be able to track your form’s page views (in this example) from Facebook Events Manager.
Custom Events
Along with out-of-the-box Google Tag Manager data, we support a few custom events and variables. You can optionally configure the integration to also send submitted field data as part of the event.
Events
- FeatheryStepSubmit - when a step of the form is submitted
- FeatheryStepLoad - when a step of the form is loaded
Variables
- userId - the ID of the user filling out the form
- formId - the unique name of the form being filled out
- stepId - the unique name of the form step being loaded or submitted
.svg)
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the
"When inside of" nested selector
system.
This is a H6
- This is a list item
- This is another list item here
.svg)
