Skip to content
Last updated: 2026-04-06
Reference

Platform Integration

This guide covers installing Dxtra Tag Manager on popular platforms and frameworks. The core installation is the same everywhere -- add the script tag to your site's <head> section:

HTML
<script src="https://tagmanager-edge.dxtra.ai/tm.js" async></script>

Platform-specific instructions are below.

WordPress

  1. Install and activate the Insert Headers and Footers plugin
  2. Navigate to Settings > Insert Headers and Footers
  3. Paste the Dxtra script tag in the Header section
  4. Click Save

Theme Method

Add to your child theme's functions.php:

PHP
function dxtra_tag_manager() {
    if (!is_admin()) {
        ?>
        <script src="https://tagmanager-edge.dxtra.ai/tm.js" async></script>
        <?php
    }
}
add_action('wp_head', 'dxtra_tag_manager');

WooCommerce E-commerce Tracking

Track product views and purchases with Dxtra Analytics:

PHP
function dxtra_woocommerce_tracking() {
    if (!function_exists('is_woocommerce')) return;
    ?>
    <script>
    <?php if (is_product()): global $product; ?>
        if (window.dxtraAnalytics) {
            window.dxtraAnalytics.track('product_view', {
                product_id: '<?php echo $product->get_id(); ?>',
                product_name: '<?php echo esc_js($product->get_name()); ?>',
                product_price: <?php echo $product->get_price(); ?>
            });
        }
    <?php endif; ?>
    <?php if (is_checkout() && is_order_received_page()):
        $order = wc_get_order(get_query_var('order-received'));
        if ($order): ?>
        if (window.dxtraAnalytics) {
            window.dxtraAnalytics.track('purchase', {
                transaction_id: '<?php echo $order->get_order_number(); ?>',
                value: <?php echo $order->get_total(); ?>,
                currency: '<?php echo $order->get_currency(); ?>'
            });
        }
    <?php endif; endif; ?>
    </script>
    <?php
}
add_action('wp_head', 'dxtra_woocommerce_tracking');

Shopify

  1. From Shopify admin, go to Online Store > Themes
  2. Click Actions > Edit code on your active theme
  3. Open theme.liquid in the Layout section
  4. Add the Dxtra script immediately after the <head> tag
  5. Click Save

Shopify E-commerce Tracking

Add to theme.liquid for automatic product and purchase tracking:

HTML
<script>
{% if template contains 'product' %}
if (window.dxtraAnalytics) {
    window.dxtraAnalytics.track('product_view', {
        product_id: {{ product.id }},
        product_name: '{{ product.title | escape }}',
        product_price: {{ product.price | divided_by: 100.0 }}
    });
}
{% endif %}

{% if template contains 'thank_you' %}
if (window.dxtraAnalytics) {
    window.dxtraAnalytics.track('purchase', {
        transaction_id: '{{ order.order_number }}',
        value: {{ order.total_price | divided_by: 100.0 }},
        currency: '{{ order.currency }}'
    });
}
{% endif %}
</script>

Squarespace

Note

Code injection requires a Business or Commerce plan.

  1. Go to Settings > Advanced > Code Injection
  2. Paste the Dxtra script tag in the Header section
  3. Click Save

Wix

Note

Custom code requires a paid subscription plan.

  1. Go to Settings > Custom Code > Advanced
  2. Click + Add Custom Code
  3. Paste the Dxtra script tag
  4. Set placement to All Pages, location to Head
  5. Click Apply

React

Add the script tag to your public/index.html <head>, or load it programmatically:

JavaScript
// App.js
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://tagmanager-edge.dxtra.ai/tm.js';
    script.async = true;
    document.head.appendChild(script);
  }, []);

  return <div className="App">{/* Your app */}</div>;
}

For React Router SPA page tracking:

JavaScript
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function usePageTracking() {
  const location = useLocation();
  useEffect(() => {
    if (window.dxtraAnalytics) {
      window.dxtraAnalytics.track('page_view', {
        page_location: window.location.href,
        page_title: document.title,
        page_path: location.pathname
      });
    }
  }, [location]);
}

Next.js

JavaScript
// pages/_app.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://tagmanager-edge.dxtra.ai/tm.js';
    script.async = true;
    document.head.appendChild(script);
  }, []);

  useEffect(() => {
    const handleRouteChange = (url) => {
      if (window.dxtraAnalytics) {
        window.dxtraAnalytics.track('page_view', {
          page_location: window.location.href,
          page_path: url
        });
      }
    };
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => router.events.off('routeChangeComplete', handleRouteChange);
  }, [router.events]);

  return <Component {...pageProps} />;
}

Vue.js

JavaScript
// main.js
const script = document.createElement('script');
script.src = 'https://tagmanager-edge.dxtra.ai/tm.js';
script.async = true;
document.head.appendChild(script);

For Vue Router page tracking:

JavaScript
// router/index.js
router.afterEach((to) => {
  if (window.dxtraAnalytics) {
    window.dxtraAnalytics.track('page_view', {
      page_location: window.location.href,
      page_path: to.path
    });
  }
});

Angular

TypeScript
// dxtra.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DxtraService {
  constructor() {
    const script = document.createElement('script');
    script.src = 'https://tagmanager-edge.dxtra.ai/tm.js';
    script.async = true;
    document.head.appendChild(script);
  }

  trackEvent(event: string, data: Record<string, unknown>): void {
    if ((window as any).dxtraAnalytics) {
      (window as any).dxtraAnalytics.track(event, data);
    }
  }
}

Verification

After installing on any platform, verify the integration:

  1. Open your site in a browser
  2. Add #dxtra-debug to the URL to activate the debug overlay
  3. Confirm the Tag Manager loads and events fire
  4. Check the Dxtra analytics dashboard for incoming data

Performance Optimization

Add DNS prefetching for faster script loading:

HTML
<link rel="dns-prefetch" href="//tagmanager-edge.dxtra.ai">
<link rel="preconnect" href="https://tagmanager-edge.dxtra.ai">

Continue to Debugging for troubleshooting Tag Manager installations.