Google Tag Manager

Google Tag Manager (GTM) is a tag management system (TMS) 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 and Track calls

• Connection Modes:

	Client-side	Server-side
Web
Mobile
Server

Getting Started

To set up the Google Tag Manager destination, follow the following steps:

1. Go to the Google Tag Manager configuration page 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. 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 &gtm_auth...

4. Paste it in the Google Tag Manager configuration page 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.

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": "[e-mail]",
	"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(), 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": "[e-mail]",
	"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 section. If you haven't set up Freshpaint on your site yet, read our Getting Started Guide.
• If you are seeing a 404 error on your page related to Google Tag Manager, make sure that you have published your container.
• Using the Google Tag Manager Destination and the inbound Google Tag Manager integration(using the Freshpaint GTM Template) at the same time is not currently supported.