Google Tag Manager Integration

Google Tag Manager (GTM) is a tag management system that allows you to manage and deploy marketing tags, analytics codes, and other third-party scripts without modifying your website code.

Environment Variables

Required Client Variables

NEXT_PUBLIC_GOOGLE_GTM_ID=GTM-XXXXXXX # Your GTM Container ID

Note:

• You can set GOOGLE_GTM_ID without the NEXT_PUBLIC_ prefix and Shipkit will automatically generate NEXT_PUBLIC_GOOGLE_GTM_ID at build time for use on the client.
• The non-prefixed variable is not accessible on the client; only the generated NEXT_PUBLIC_* value is exposed.

Setup Instructions

1. Create a Google Tag Manager Account: Sign up at tagmanager.google.com if you haven't already

2. Create a GTM Container:

   • Go to your GTM dashboard
   • Create a new container for your website
   • Choose "Web" as the target platform

3. Get Your Container ID:

   • In your GTM container, the ID is displayed in the top navigation
   • It follows the format GTM-XXXXXXX

4. Add Environment Variables:

   NEXT_PUBLIC_GOOGLE_GTM_ID=GTM-XXXXXXX
   

Features Enabled

When this environment variable is configured, the following features become available:

• ✅ Centralized tag management
• ✅ Easy deployment of analytics and marketing tags
• ✅ Version control for tag configurations
• ✅ Built-in triggers and variables
• ✅ Integration with Google Analytics, Google Ads, Facebook Pixel, and more
• ✅ Custom HTML/JavaScript tag support
• ✅ Real-time tag firing monitoring

Configuration Options

Advanced Configuration

You can customize GTM behavior with additional settings:

# Custom data layer name
NEXT_PUBLIC_GTM_DATA_LAYER_NAME=dataLayer

# Enable debug mode in development
NEXT_PUBLIC_GTM_DEBUG=true

# Custom environment (for staging/production separation)
NEXT_PUBLIC_GTM_ENVIRONMENT=production

Common Use Cases

Google Tag Manager enables:

• Analytics: Google Analytics, Adobe Analytics, Mixpanel
• Advertising: Google Ads, Facebook Pixel, LinkedIn Insight
• Marketing: HubSpot, Salesforce, Marketo
• Support: Intercom, Zendesk, LiveChat
• Performance: Hotjar, Crazy Egg, FullStory
• Custom Scripts: Any third-party tracking or marketing code

Testing

GTM provides comprehensive testing capabilities:

• Use GTM's built-in preview mode
• Test tags in different environments
• Use Google Tag Assistant browser extension
• Monitor tag firing in real-time
• Debug data layer events

Production Deployment

Before going live:

1. Publish your GTM container
2. Test all tags in preview mode
3. Verify tag firing order and timing
4. Set up proper trigger conditions
5. Configure environment-specific settings
6. Set up proper error handling for failed tags