URL to Cookies or Local Storage Google Tag Manager Custom Template
## Overview
This custom template for Google Tag Manager (GTM) captures and stores UTM parameters from URL query strings. It supports both cookie and localStorage storage methods with configurable durations for cookies.
## Features
– Captures specified UTM parameters from URL query strings
– Stores parameters in cookies with configurable durations
– Optional localStorage backup storage
– Detailed logging for debugging
– Flexible parameter configuration
## Configuration Fields
### Required Fields
– **utm** (String): Comma-separated list of UTM parameters to track (e.g., “utm_source,utm_medium,utm_campaign”)
### Optional Fields
– **cookie_duration_tag** (String): Duration for cookie storage. Options:
– “session”
– “7 days”
– “30 days” (default)
– “60 days”
– “90 days”
– **local_storage** (Boolean): Enable/disable localStorage backup storage (default: false)
## Storage Behavior
### Cookie Storage
– Cookies are always created with domain ‘auto’ and path ‘/’
– Duration options:
– Session: Cookie expires when browser closes
– Fixed duration: 7, 30, 60, or 90 days
– Default: 30 days if not specified or invalid value
– Cookie names match parameter names exactly
### localStorage Storage (Optional)
– Permanent storage until explicitly cleared
– Only enabled if local_storage is set to true
– Storage keys match parameter names exactly
## Implementation Details
### Dependencies
“`javascript
– getUrl: For accessing URL parameters
– createQueue: For GTM queue management
– setCookie: For cookie operations
– queryPermission: For permission checking
– logToConsole: For debugging output
– localStorage: For localStorage operations
“`
### Process Flow
1. Template validates configuration
2. Retrieves URL query string
3. Splits UTM parameter list into array
4. For each parameter:
– Checks if present in query string
– Extracts parameter value if found
– Stores in cookie with specified duration
– Optionally stores in localStorage
5. Triggers success/failure callback
### Error Handling
– Fails gracefully if no UTM parameters are configured
– Logs detailed information for debugging
– Falls back to default duration (30 days) for invalid cookie duration settings
## Logging
The template provides extensive logging for debugging:
– LocalStorage status
– Cookie duration settings
– Full query string content
– Parameter processing details
– Storage operation attempts
## Example Usage
### Basic Configuration
“`javascript
{
“utm”: “utm_source,utm_medium,utm_campaign”,
“cookie_duration_tag”: “30 days”,
“local_storage”: false
}
“`
### Extended Configuration
“`javascript
{
“utm”: “utm_source,utm_medium,utm_campaign,utm_term,utm_content”,
“cookie_duration_tag”: “90 days”,
“local_storage”: true
}
“`
## Best Practices
1. Include only necessary UTM parameters to minimize storage usage
2. Consider privacy regulations when setting cookie durations
3. Enable localStorage only if longer-term tracking is required
4. Monitor logs during initial implementation to ensure proper functioning
## Limitations
– Cannot modify cookies after they’re set
– Cookie names must match parameter names exactly
– No built-in value validation or sanitization
– Cookie duration options are fixed to predefined values
## Troubleshooting
### Common Issues
1. **Parameters Not Being Tracked**
– Verify parameter names match exactly in configuration
– Check URL contains expected parameters
– Review console logs for errors
2. **Cookie Duration Issues**
– Confirm duration setting is one of the valid options
– Check browser cookie settings
– Verify domain configuration
3. **localStorage Not Working**
– Confirm local_storage is set to true
– Check browser localStorage settings
– Verify browser supports localStorage
## Version History
Initial Release:
– Basic UTM parameter tracking
– Configurable cookie duration
– Optional localStorage support
– Comprehensive logging
## Support
For issues or questions:
1. Review console logs for detailed operation information
2. Check configuration matches expected parameters
3. Verify all dependencies are available
4. Test in multiple browsers if issues persist
John B.
Server-Side Tracking Full-Stack developer/consultant.
About me
Hi! It’s nice to meet you! My name is John Bernal, I’m an international freelancer who offers Customer and Marketing Analytics services.
I’m the founder of the most active Whatsapp community for Spanish speakers.