> ## Documentation Index
> Fetch the complete documentation index at: https://docs.datalyr.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Container Overview

> Manage tracking pixels, scripts, and tags without editing code

DATALYR Container is a tag management system similar to Google Tag Manager that lets you add and manage tracking pixels, custom scripts, and third-party tags without editing your website code. **It's built into the `dl.js` tracking tag** — there is no separate container script to install.

## How It Works

Your `dl.js` tag (the single DATALYR snippet) runs the Container on load: it fetches your configured tags from `/container-scripts` and executes them based on their triggers and conditions. On by default.

**Traditional tracking — every pixel hardcoded, each change a deploy:**

```html theme={null}
<script src="https://track.datalyr.com/dl.js" data-workspace-id="ws_123"></script>
<script src="https://connect.facebook.net/en_US/fbevents.js"></script>
<script src="https://www.googletagmanager.com/gtag/js?id=..."></script>
<script src="https://analytics.tiktok.com/i18n/pixel/events.js"></script>
```

**With the Container — one tag, manage everything from the dashboard:**

```html theme={null}
<script defer src="https://track.datalyr.com/dl.js" data-workspace-id="ws_123"></script>
```

The same `dl.js` tag loads your Meta/Google/TikTok pixels and custom scripts from the dashboard — no extra tags, no code changes.

## What You Can Manage

**Tracking Pixels**
Add Meta Pixel, TikTok Pixel, Google Tag, and other tracking pixels with automatic configuration.

**Custom JavaScript**
Run custom JavaScript code on specific pages or events without editing your site.

**Third-Party Scripts**
Load external scripts (analytics, chat widgets, heatmaps) with trigger control.

**Event Tracking**
Track custom events, button clicks, form submissions, and more with conditional logic.

## Key Features

### GTM-Like Triggers

Fire tags based on events:

* **Page Load**: Execute on initial page load
* **DOM Ready**: Wait for DOM to be ready
* **History Change**: Fire on SPA navigation (React, Vue, Next.js)
* **Scroll**: Trigger when user scrolls past threshold
* **Visibility Change**: Fire when tab becomes visible

### Conditional Loading

Control when tags fire with conditions:

* **URL Path**: Match specific pages or patterns
* **Query Parameters**: Check for UTM parameters or custom params
* **Referrer**: Target traffic from specific sources
* **Device Type**: Mobile, tablet, or desktop only
* **Custom JavaScript**: Write custom logic

### Firing Frequency

Control how often tags execute:

* **Always**: Fire every time trigger occurs
* **Once per Page**: Fire only once per page load
* **Once per Session**: Fire once per browser session

### Built-In Variables

Use dynamic variables in your scripts:

* `{{Page URL}}`: Current page URL
* `{{Page Path}}`: URL path only
* `{{Page Title}}`: Document title
* `{{Referrer}}`: Document referrer
* `{{UTM Source}}`: utm\_source parameter
* `{{UTM Medium}}`: utm\_medium parameter
* `{{UTM Campaign}}`: utm\_campaign parameter
* `{{Query String}}`: Full query string
* `{{User Agent}}`: Browser user agent
* `{{Timestamp}}`: Current timestamp

## Use Cases

**Manage Ad Pixels**
Add Meta Pixel, TikTok Pixel, and Google Tag from your dashboard. Update pixel IDs without deploying code.

**A/B Testing**
Load different scripts for different user segments using conditions.

**Gradual Rollouts**
Test new tracking on specific pages before rolling out site-wide.

**Event Tracking**
Track button clicks, form submissions, and custom interactions without code changes.

**Third-Party Integrations**
Add chat widgets, analytics tools, and heatmaps with conditional loading.

**SPA Support**
Automatically handle navigation changes in React, Vue, and Next.js apps.

## Performance

The Container system is optimized for performance:

**No extra request for the tag**
The Container ships inside `dl.js` — there's no separate script to download. The only added work is one cached `/container-scripts` fetch.

**Caching**
Scripts are cached for 30 minutes on the client and server.

**Async Loading**
External scripts load asynchronously without blocking page render.

**Conditional Execution**
Tags only load when conditions are met, reducing unnecessary requests.

**SPA Optimized**
Detects navigation changes without polling or heavy listeners.

## Security

**URL Validation**
All external scripts and pixels are validated for safe URLs (https\:// only in production).

**CSP Support**
Supports Content Security Policy with nonce attributes.

**Sandbox Execution**
Custom JavaScript runs in sandboxed environments when possible.

**No eval()**
Inline scripts execute via Function constructor or CSP-nonce injection (no eval).

## Limitations

**Client-side only**
The Container runs in the browser. For server-rendered pixels, hardcode them and run `dl.js` in tracking-only mode (`enableContainer: false`).

**Browser Only**
Not available for mobile apps (use native SDKs instead).

**Delayed Loading**
Tags load after the container script fetches configurations (typically 50-200ms).

**100 Script Limit**
Maximum 100 active container scripts per workspace.

## Container mode vs tracking-only

Both use the same `dl.js` tag — the only difference is whether it manages your pixels:

|                         | Container mode (default)    | Tracking-only (`enableContainer: false`) |
| ----------------------- | --------------------------- | ---------------------------------------- |
| **Pixel changes**       | instant, from the dashboard | code change + deploy                     |
| **Conditional loading** | built-in                    | you code it                              |
| **Best for**            | most sites                  | hardcoded / server-rendered pixels       |

See [Container vs Tracking-Only](/container/container-vs-direct) for the full breakdown.

## Next Steps

<CardGroup cols={2}>
  <Card title="Install" icon="download" href="/container/installation">
    Install dl.js — the Container is built in
  </Card>

  <Card title="Managing Tags" icon="tags" href="/container/managing-tags">
    Create and configure tags
  </Card>

  <Card title="Container vs Tracking-Only" icon="code-compare" href="/container/container-vs-direct">
    When to let dl.js manage your pixels
  </Card>

  <Card title="Integrations" icon="plug" href="/integrations/overview">
    Connect ad platforms
  </Card>
</CardGroup>

## Need Help?

Questions about Container? Check our [troubleshooting guide](/troubleshooting/tracking-not-working) or contact support.