> For the complete documentation index, see [llms.txt](https://documentation.freshpaint.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.freshpaint.io/integrations/destinations/apps/google-tag-manager.md). # Google Tag Manager [Google Tag Manager](https://marketingplatform.google.com/about/tag-manager/?utm_source=segment\&utm_medium=integrations-page\&utm_campaign=partners) (GTM) is a [tag management system (TMS)](https://en.wikipedia.org/wiki/Tag_management_system) that allows you to quickly and easily update measurement codes and related code fragments collectively known as tags on your website. ## Destination Info * Accepts [Page](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#page) and [Track](https://documentation.freshpaint.io/developer/freshpaint-sdk-reference#track) calls * Connection Modes:
Client-sideServer-side
Webtruefalse
Mobilefalsefalse
Serverfalsefalse
## Getting Started To set up the Google Tag Manager destination, follow the following steps: 1. Go to the [Google Tag Manager configuration page](https://app.freshpaint.io/destinations/apps/google-tag-manager) in Freshpaint and click "Configure" 2. Retrieve your Google Tag Manager Container ID and paste it in Freshpaint
3. Click "Save" in Freshpaint to complete the configuration ### Additional Configuration You may optionally configure Freshpaint to set up GTM in [preview mode](https://support.google.com/tagmanager/answer/6107056). For example you might configure your staging environment in Freshpaint to set up GTM in preview mode so that you can validate your tags on your staging site before publishing the tags to production. To configure GTM in preview mode: 1. In GTM, navigate to the "Admin" tab and click Environments
2. Select the environment you'd like to use for previewing your tag changes and copy the `gtm_auth` and `gtm_preview` portions of the URL
3. Edit the copied text so that it begins with `env-xxx` followed by `>m_auth...` 4. Paste it in the [Google Tag Manager configuration page](https://app.freshpaint.io/destinations/apps/google-tag-manager) in Freshpaint and click "Save"
## Track Events When you send an event to Google Tag Manager from Freshpaint, Freshpaint will push an event to the Google Tag Manager's data layer. You can [configure Google Tag Manager to trigger a tag when an event is fired](https://support.google.com/tagmanager/answer/7679219?hl=en\&ref_topic=7679108). For example, if you call `freshpaint.track('Purchase', {amount: 100})`, Freshpaint will send the following event to GTM: ``` { "event": "Purchase", "segmentAnonymousId": "1861350a10c157-0cbde96c86f4de-16525635-13c680-1861350a10d1aa8", "userId": "someone@example.com", "amount": 100 } ``` | GTM Property | Description | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | `event` | The name of the event | | `segmentAnonymousId` | The unique identifier for the device the event was sent from | | `userId` | The unique identifier for the user that performed the event. If the user has not yet been identified, this field will be omitted. | ## Page Events When you call [freshpaint.page()](/reference/developer/freshpaint-sdk-reference.md#page), if you provide a name or a category for the page, Freshpaint will send an event to GTM. If you call `freshpaint.page(category, name)`, Freshpaint will send two events to GTM. One will refer to both the category and the page name, and the other will only refer to the category. For example, if you call `freshpaint.page('Help', 'Make a Sandwich')` Freshpaint will send two events to Google Tag Manager. One will look like this: ``` { "event": "Viewed Help Make a Sandwich Page", "name": "Make a Sandwich", "category: "Help", "title": "How to Make a Sandwich", "segmentAnonymousId": "1861350a10c157-0cbde96c86f4de-16525635-13c680-1861350a10d1aa8", "userId": "someone@example.com", "url": "http://example.com/", "path": "/", "referrer": "", "search": "", "gtm.uniqueEventId": 3 } ``` The other event is the same except the event name will be `"Viewed Help Page"`. If you only provide a page name and not a category, Freshpaint will only send one event to GTM, and the event name will refer to the page name.. The event will look just like previous example. For example, if you call `freshpaint.page('Make a Sandwich')`, the name of the event will be `Viewed Make a Sandwich Page`. ## Considerations * It is possible to load Freshpaint on your site via Google Tag Manager. However, this is not recommended. Instead, load Google Tag Manager via Freshpaint by following the instructions under the [Getting Started](#in-iterable) section. If you haven't set up Freshpaint on your site yet, read our [Getting Started Guide](/readme/guides/quickstart/installing-freshpaint.md). * If you are seeing a 404 error on your page related to Google Tag Manager, make sure that you have [published your container](https://support.google.com/tagmanager/answer/6107163?hl=en). * Using the Google Tag Manager Destination and the inbound [Google Tag Manager integration](/integrations/google-tag-manager-integration.md)(using the Freshpaint GTM Template) at the same time is not currently supported. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://documentation.freshpaint.io/integrations/destinations/apps/google-tag-manager.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.