Skip to main content
Install the DATALYR Container script to manage all your tracking pixels and tags from your dashboard without code changes.

​
Before You Start

  • You have a DATALYR account
  • You’ve created a workspace
  • You have access to edit your website HTML or use a tag manager

​
Step 1: Get Your Container Script

  1. Log in to your DATALYR dashboard
  2. Go to Settings → Tracking
  3. Copy your container script:
<script
  defer
  src="https://track.datalyr.com/container.js"
  data-workspace-id="YOUR_WORKSPACE_ID">
</script>

​
Step 2: Add to Your Website

​
Option 1: Direct HTML

Add the script to your website’s <head> section: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Your Website</title>

  <!-- DATALYR Container -->
  <script
    defer
    src="https://track.datalyr.com/container.js"
    data-workspace-id="YOUR_WORKSPACE_ID">
  </script>
</head>
<body>
  <!-- Your content -->
</body>
</html>

​
Option 2: Google Tag Manager

If you use Google Tag Manager:
  1. Go to Tags → New
  2. Click Tag Configuration
  3. Choose Custom HTML
  4. Paste your container script
  5. Set trigger to All Pages
  6. Save and publish

​
Option 3: Next.js

Add to your root layout or _app.tsx: App Router (app/layout.tsx): 
import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://track.datalyr.com/container.js"
          data-workspace-id={process.env.NEXT_PUBLIC_DATALYR_WORKSPACE_ID}
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}
Pages Router (pages/_app.tsx): 
import Script from 'next/script'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Script
        src="https://track.datalyr.com/container.js"
        data-workspace-id={process.env.NEXT_PUBLIC_DATALYR_WORKSPACE_ID}
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  )
}

​
Option 4: Webflow

  1. Open your Webflow project
  2. Click Settings (gear icon)
  3. Go to Custom Code tab
  4. Paste your container script in Head Code
  5. Save and publish

​
Option 5: WordPress

  1. Go to Appearance → Theme File Editor
  2. Select header.php
  3. Find the </head> closing tag
  4. Paste your container script before </head>
  5. Click Update File
Or use a plugin like Insert Headers and Footers.

​
Option 6: Shopify

  1. Go to Online Store → Themes
  2. Click Actions → Edit code
  3. Open theme.liquid
  4. Find the </head> closing tag
  5. Paste your container script before </head>
  6. Click Save

​
Step 3: Verify Installation

  1. Visit your website in a new browser tab
  2. Open browser DevTools (F12)
  3. Go to Console tab
  4. Look for: [DATALYR Container] Initialized
If you see this message, the container is installed correctly.

​
Check Network Requests

  1. Open DevTools → Network tab
  2. Filter by container or datalyr
  3. You should see a request to https://ingest.datalyr.com/container-scripts
  4. Response should return your configured scripts

​
Step 4: Configure Tags

Now that the container is installed, add your first tag:
  1. Go to Dashboard → Settings → Container
  2. Click Add New Tag
  3. Configure your tag (Meta Pixel, custom script, etc.)
  4. Set triggers and conditions
  5. Save and activate
Tags will start firing immediately without code changes.

​
Configuration Options

​
Enable Debug Mode

Add data-debug="true" to see detailed console logs: 
<script
  defer
  src="https://track.datalyr.com/container.js"
  data-workspace-id="YOUR_WORKSPACE_ID"
  data-debug="true">
</script>
Or add ?datalyr_debug=true to your URL: 
https://yoursite.com?datalyr_debug=true

​
CSP Nonce Support

If you use Content Security Policy, add a nonce: 
<script
  defer
  src="https://track.datalyr.com/container.js"
  data-workspace-id="YOUR_WORKSPACE_ID"
  data-csp-nonce="YOUR_NONCE">
</script>

​
Disable Cache (Testing)

Force fresh script fetch on every load: 
https://yoursite.com?datalyr_nocache=true
Use this only for testing. Caching improves performance.

​
Container + Direct Tracking

You can use both container and direct tracking together: 
<head>
  <!-- Container for tag management -->
  <script
    defer
    src="https://track.datalyr.com/container.js"
    data-workspace-id="YOUR_WORKSPACE_ID">
  </script>

  <!-- Direct tracking script for attribution -->
  <script
    defer
    src="https://track.datalyr.com/dl.js"
    data-workspace-id="YOUR_WORKSPACE_ID">
  </script>
</head>
This gives you:
  • Attribution tracking from dl.js
  • Tag management from container.js

​
SPA Configuration

For Single Page Applications (React, Vue, Next.js): The container automatically detects navigation changes using:
  • history.pushState and history.replaceState interception
  • popstate events
  • Performance Observer API
No additional configuration needed. Tags with history_change trigger will fire on navigation.

​
Troubleshooting

Container script not loading? Check that:
  • Script URL is correct: https://track.datalyr.com/container.js
  • Workspace ID is correct
  • Ad blockers are disabled
  • Script is in the <head> section
  • defer attribute is present
Scripts not firing?
  1. Enable debug mode: data-debug="true"
  2. Check console for errors
  3. Verify triggers and conditions in dashboard
  4. Check that tags are active
  5. Clear cache: ?datalyr_nocache=true
404 errors? The container endpoint is: 
https://ingest.datalyr.com/container-scripts
If you see 404s, verify your workspace ID is correct. Performance issues?
  • Limit number of active tags (max 100)
  • Use conditional loading to reduce unnecessary scripts
  • Check external script URLs for slow responses
  • Enable caching (remove datalyr_nocache)
CSP errors? Add to your Content Security Policy: 
Content-Security-Policy:
  script-src 'self' https://track.datalyr.com;
  connect-src 'self' https://ingest.datalyr.com;
Or use nonce attributes: data-csp-nonce="YOUR_NONCE"

​
API Access

Check container status programmatically: 
// Check if container is loaded
if (window.DATALYR && window.DATALYR.container) {
  console.log('Container version:', window.DATALYR.container.version);
  console.log('Workspace ID:', window.DATALYR.container.workspaceId);

  // Get metrics
  const metrics = window.DATALYR.container.getMetrics();
  console.log('Scripts fired:', metrics.scriptsFired);
  console.log('Cache hits:', metrics.cacheHits);

  // Get errors
  const errors = window.DATALYR.container.getErrors();
  console.log('Errors:', errors);

  // Manually reload scripts
  window.DATALYR.container.reload();

  // Fire specific trigger
  window.DATALYR.container.fire('custom_trigger');
}

​
Next Steps

Managing Tags

Create and configure your first tag

Container Overview

Learn about Container features

Container vs Direct

Compare installation methods

Verify Tracking

Confirm everything works

​
Need Help?

Having issues with Container installation? Check our troubleshooting guide or contact support.