Skip to main content
Choose between Container (tag management) and Direct installation (hardcoded scripts) based on your needs.

Quick Comparison

FeatureContainerDirect Installation
Code ChangesOnce (initial setup)Every pixel/script
Update SpeedInstant from dashboardRequires deployment
Script ManagementVisual dashboardEdit code files
Conditional LoadingBuilt-inManual coding
SPA SupportAutomaticManual setup
PerformanceSmall overhead (50-200ms)Faster initial load
ComplexityBeginner-friendlyDeveloper required
Mobile AppsNot supportedUse native SDKs
Third-Party ScriptsUnlimitedManual addition
TestingEasy A/B testingHarder to test

When to Use Container

You Should Use Container If:

You manage multiple tracking pixels Add Meta Pixel, TikTok Pixel, Google Tag, and more from your dashboard without editing code. You need to update pixels frequently Change pixel IDs, add new events, or update tracking without waiting for deployments. You have non-technical team members Marketers can add and manage tags without developer help. You run A/B tests on tracking Test different pixels on different pages using conditions. You have a Single Page Application Automatic SPA navigation detection (React, Vue, Next.js). You want conditional loading Only load scripts on specific pages, devices, or traffic sources. You need quick rollbacks Disable tags instantly from dashboard if something breaks.

Container is Perfect For:

  • E-commerce sites with multiple ad platforms
  • Marketing teams managing their own tracking
  • Agencies managing client pixels
  • Sites testing new tracking tools
  • Gradual pixel rollouts

When to Use Direct Installation

You Should Use Direct Installation If:

You need maximum performance Direct installation loads 50-200ms faster (no container fetch required). You have server-side rendering Container only works client-side. SSR needs direct installation. You rarely change tracking If your tracking is stable, direct installation is simpler. You have one or two scripts Container adds overhead for minimal benefit with few scripts. You need mobile app tracking Use native iOS or React Native SDKs, not Container. You want TypeScript support Use @datalyr/web SDK for full TypeScript integration.

Direct Installation is Perfect For:

  • Simple sites with stable tracking
  • Next.js apps using SSR
  • Performance-critical sites
  • Mobile applications
  • Developer-focused teams

Performance Comparison

Container Performance

Initial Load:
1. Load container.js (~35KB)           +20ms
2. Fetch container scripts from API     +50-150ms
3. Execute configured tags              +10-30ms
---------------------------------------------------
Total overhead:                         80-200ms
Subsequent Pages (Cached):
1. Container already loaded             0ms
2. Scripts cached (30 min)              0ms
3. Execute tags on navigation           +10-30ms
---------------------------------------------------
Total overhead:                         10-30ms

Direct Installation Performance

Initial Load:
1. Load dl.js (~20KB)                   +15ms
2. Initialize tracking                  +5ms
---------------------------------------------------
Total overhead:                         20ms
Performance Notes:
  • Container adds ~60-180ms on first page load
  • Subsequent pages are fast (scripts cached)
  • Direct is faster but requires code changes for updates
  • Both use defer/async loading (don’t block render)

Feature Comparison

Tracking Features

FeatureContainerDirect
Attribution Tracking✅ Via dl.js integration✅ Built-in
Event Tracking✅ Custom scripts✅ SDK methods
User Identification✅ Custom scripts✅ SDK methods
Session Tracking✅ Automatic✅ Automatic
UTM Tracking✅ Automatic✅ Automatic
Click ID Tracking✅ Automatic✅ Automatic

Management Features

FeatureContainerDirect
Dashboard Management✅ Yes❌ Code only
Instant Updates✅ Yes❌ Needs deployment
Conditional Loading✅ Built-in⚠️ Manual coding
Trigger System✅ GTM-like triggers⚠️ Manual coding
Variable System✅ Built-in variables⚠️ Manual coding
A/B Testing✅ Easy⚠️ Manual setup

Technical Features

FeatureContainerDirect
SPA Support✅ Automatic⚠️ Manual setup
SSR Support❌ Client-side only✅ Full support
TypeScript⚠️ Via window.DATALYR✅ Full types
Mobile Apps❌ Not supported✅ Native SDKs
CSP Support✅ With nonce✅ With nonce
Offline Queue⚠️ Per-script basis✅ Built-in

Code Examples

Container Installation

Install once, manage everything from dashboard:
<head>
  <script
    defer
    src="https://track.datalyr.com/container.js"
    data-workspace-id="YOUR_WORKSPACE_ID">
  </script>
</head>
Then manage all scripts from dashboard:
  • Meta Pixel
  • TikTok Pixel
  • Google Tag
  • Custom tracking scripts
  • Third-party widgets
No additional code changes needed.

Direct Installation

Install base tracking:
<head>
  <script
    defer
    src="https://track.datalyr.com/dl.js"
    data-workspace-id="YOUR_WORKSPACE_ID">
  </script>
</head>
Then manually add each pixel:
<!-- Meta Pixel -->
<script>
  !function(f,b,e,v,n,t,s){...}(window,document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

<!-- TikTok Pixel -->
<script>
  !function (w, d, t) {...}(window, document, 'script');
  ttq.load('YOUR_PIXEL_ID');
  ttq.page();
</script>

<!-- Google Tag -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'YOUR_TAG_ID');
</script>
Every pixel change requires code updates.

Using Both Together

You can use both Container and Direct installation:
<head>
  <!-- Direct tracking for attribution -->
  <script
    defer
    src="https://track.datalyr.com/dl.js"
    data-workspace-id="YOUR_WORKSPACE_ID">
  </script>

  <!-- Container for tag management -->
  <script
    defer
    src="https://track.datalyr.com/container.js"
    data-workspace-id="YOUR_WORKSPACE_ID">
  </script>
</head>
Benefits:
  • Direct tracking provides attribution and base events
  • Container manages all your pixels and custom scripts
  • Best of both worlds
Use Case: Sites that need reliable attribution (direct) but also want flexible tag management (container).

Migration

From Direct to Container

  1. Install container script alongside direct tracking
  2. Recreate your pixels as container tags
  3. Test that both work together
  4. Remove hardcoded pixels from code
  5. Keep direct tracking script for attribution

From Container to Direct

  1. Note all active container tags
  2. Install direct tracking script
  3. Manually add each pixel to your codebase
  4. Test that direct tracking works
  5. Remove container script

Decision Framework

Start with these questions:
  1. How often do you update tracking?
    • Monthly or more → Container
    • Rarely → Direct
  2. Who manages tracking?
    • Marketers → Container
    • Developers only → Direct
  3. How many tracking tools?
    • 3+ platforms → Container
    • 1-2 platforms → Direct
  4. Do you need SSR?
    • Yes → Direct
    • No → Either works
  5. Do you run A/B tests?
    • Yes → Container
    • No → Either works
  6. Is 100ms page load critical?
    • Yes → Direct
    • No → Either works

Recommendations

For Most Sites: Container

Container is recommended for:
  • 80% of websites
  • E-commerce stores
  • Marketing-heavy sites
  • SaaS platforms
  • Agency-managed sites

For Performance Sites: Direct

Direct installation is better for:
  • High-traffic sites (millions of pageviews)
  • Performance-critical applications
  • Server-side rendered apps
  • Sites with stable tracking

For Mobile Apps: Native SDKs

Use native SDKs (not Container):
  • iOS apps: @datalyr/swift
  • React Native: @datalyr/react-native
  • Flutter: Custom implementation

Next Steps

Need Help?

Still deciding between Container and Direct? Contact support and we’ll help you choose the best approach for your site.