Google Tag Manager Integration

Learn how to integrate Google Tag Manager (GTM) with your Checkout modal to streamline tag management for marketing and analytics.

​

Overview

Integrating Google Tag Manager (GTM) with your Checkout modal enables easy management of tags, providing in-depth analytics that can enhance campaign strategies. GTM facilitates tracking of user activities without altering your website’s code.

​

Prerequisites

Before integrating GTM, ensure you have:

• Access to your organization’s GTM account.
• GTM installed on your website. Refer to Google’s installation guide.

​

Quick Start for Google Analytics and Meta Pixel

We provide pre-built GTM templates for seamless integration with Google Analytics and Meta Pixel. These templates cover all triggers and variables supported by givetly. Download and integrate them with your current setup:

• Download Google Analytics template
• Download Meta Pixel template

​

How to Import and Merge a Template

1. Log in to Google Tag Manager.
2. Go to the Admin section.
3. Select Import Container.
4. Choose Container file and upload the JSON template.
5. Select the Existing option to add it to your container.
6. Choose Merge as the import option.
7. Opt for Rename conflicting tags, triggers, and variables.

8. On the import preview screen, select Confirm to complete the process.

Visit these resources for detailed configuration:

• Google Analytics setup
• Meta Pixel setup

​

Set Up GTM Manually

If you prefer a different analytics tool or want manual configuration, follow these steps to set up GTM triggers, variables, and tags.

​

Step 1. Configure GTM’s Triggers

givetly sends events like checkoutOpen, checkoutClose, and donationComplete to GTM. Follow the steps to create GTM triggers for tracking:

1. Create a New Trigger: Go to the Triggers section in GTM, click “New,” and choose “Custom Event”.
2. Set Event Names: Assign triggers for checkoutOpen, donationComplete, and checkoutClose using event names like Givetly.donationComplete.
3. Include Variables: Use variables like Campaign ID in triggers to identify events related to campaigns.
4. Save the Trigger: Give it a descriptive name and save.

​

Step 2. Configure GTM’s Variables (Optional)

Adding GTM variables lets you tailor your tracking for better analysis. Configure necessary variables like Campaign ID using the Data Layer Variable type.

1. Navigate to Variables: Start from the Variables section, click “New”.
2. Set Up Variables: Use Data Layer Variable and fill in a name like Givetly.campaign.id.
3. Name and Save: Save under a descriptive name for clarity.

​

Step 3. Configure GTM’s Tags

Create tags that will activate based on your configured triggers, sending details to your platforms.

1. Create a New Tag: Go to the Tags section, click “New”.
2. Choose Tag Type: Select the appropriate platform or create a Custom HTML Tag.
3. Configure Tag: Input the tracking information.
4. Add Variables: Integrate variables to personalize event data.
5. Assign Trigger: Select the trigger associated with this tag.
6. Name and Save: Comple your setup by saving the tag.

​

Step 4. Test and Publish

Ensure configurations are correct before going live.

1. Enable Preview Mode: Check GTM’s Preview mode to test setups.
2. Verify Functionality: Test your Checkout modal actions to ensure tags trigger correctly.
3. Publish: Once satisfied, make the GTM container live.

​

Integrate GTM with Campaign Pages

For GTM integration specific to Campaign Pages, check out our detailed guide.