Installation Guide¶
Install Dxtra Tag Manager on your website to manage tracking scripts, analytics, and marketing tags.
Prerequisites¶
- A Dxtra account with Tag Manager access
- An application created in the Tag Manager dashboard
- Access to your website's HTML or CMS
Standard Installation¶
Add the Tag Manager script to the <head> section of every page:
For analytics-only (sub-5KB, no tag management features):
SPA Support¶
For single-page applications, add query parameters to enable SPA tracking:
<!-- History API navigation (React Router, Vue Router, etc.) -->
<script src="https://tagmanager-edge.dxtra.ai/tm.js?opts=spa" async></script>
<!-- Hash-based navigation -->
<script src="https://tagmanager-edge.dxtra.ai/tm.js?opts=spa,hash" async></script>
The spa option listens for History API changes and re-evaluates rules on navigation. The hash option additionally listens for hash changes.
Platform-Specific Installation¶
WordPress¶
Use a plugin like "Insert Headers and Footers" or add directly to your theme:
- Go to Appearance > Theme Editor
- Select
header.php - Add the script tag after the opening
<head>tag - Save
For child theme installation:
// In your child theme's functions.php
function dxtra_tag_manager() {
?>
<script src="https://tagmanager-edge.dxtra.ai/tm.js" async></script>
<?php
}
add_action('wp_head', 'dxtra_tag_manager', 1);
Shopify¶
- Go to Online Store > Themes
- Click Actions > Edit code
- Open
theme.liquidin the Layout section - Add the script tag after the opening
<head>tag - Save
Squarespace¶
Plan Requirement
Code injection requires a Business or Commerce plan.
- Go to Settings > Advanced > Code Injection
- Paste the script tag in the Header section
- Save
Wix¶
Plan Requirement
Custom code requires a paid subscription plan.
- Go to Settings > Custom Code > Advanced
- Click + Add Custom Code
- Paste the script tag
- Set placement to All Pages and location to Head
- Apply
MediaWiki¶
Using the HeadScript extension:
// In LocalSettings.php
require_once "$IP/extensions/HeadScript/HeadScript.php";
$wgHeadScriptCode = <<<'START_END_MARKER'
<script src="https://tagmanager-edge.dxtra.ai/tm.js" async></script>
START_END_MARKER;
Placement Tags¶
To display content at specific locations on a page, add placement tag elements:
Replace YOUR_TAG_CODE with the code from your placement tag configuration in the dashboard.
Custom Domain Setup¶
To serve the Tag Manager script from your own domain:
- Create a CNAME DNS record pointing your subdomain to
tagmanager-edge.dxtra.ai - Configure the custom domain in your application's environment settings
- SSL certificates are provisioned automatically via Let's Encrypt
After setup, use your custom domain in the script tag:
Verification¶
Debug Mode¶
Add #dxtra-debug to any page URL to open the debug overlay:
This requires logging in with your Dxtra account. The overlay shows:
- Tag loading status
- Rule evaluation results
- Events fired
- Data container values
- Console output
Browser DevTools¶
Check the Network tab for successful loading of:
tm.js(oranalytics.js) -- Tag Manager script- Requests to
tagmanager-edge.dxtra.aiortagmanager-api.dxtra.ai
Troubleshooting¶
Script Not Loading¶
| Issue | Solution |
|---|---|
| 404 error | Verify your application exists and the environment is deployed |
| Blocked by ad blocker | Use a custom domain to avoid ad blocker lists |
| CSP error | Add tagmanager-edge.dxtra.ai and tagmanager-api.dxtra.ai to your Content Security Policy |
| Mixed content | Ensure you use https:// in the script URL |
Tags Not Firing¶
| Issue | Solution |
|---|---|
| No rules configured | Create at least one rule with events and actions |
| Environment not deployed | Finalize and deploy a revision to the target environment |
| Consent not granted | Check CMP Check event conditions match your consent setup |
| Wrong environment | Verify the script URL matches the correct environment |
Performance¶
- Load the script with
asyncto avoid blocking page rendering - Use
dns-prefetchandpreconnectfor faster loading:
<link rel="dns-prefetch" href="//tagmanager-edge.dxtra.ai">
<link rel="preconnect" href="https://tagmanager-edge.dxtra.ai">
Related Documentation¶
- Overview -- Tag Manager concepts and architecture
- Creating an Application -- Set up your first application
- Debugging -- Debug mode and troubleshooting
- Environments -- Environment configuration