Skip to main content
Add DATALYR tracking code directly to your Shopify theme for full control over event tracking.

​
Use Cases

Custom Event Tracking Track specific interactions like button clicks, video plays, or custom checkout steps. Headless Shopify Use with custom storefronts built on Hydrogen or other frameworks. Theme Customization Full control over when and how events are tracked. Customize for unique business needs. Development/Testing Test tracking in development environments before deploying to production.

​
When to Use Manual Installation

Use Manual Installation if:
  • You need full control over event tracking
  • You have a highly customized theme
  • You’re using headless Shopify
  • You want to track custom events beyond standard e-commerce
Use App Installation if:
  • You want automatic order tracking
  • You don’t want to edit theme code
  • You want one-click installation
See app installation guide →

​
Before You Start

  • You have a DATALYR account
  • You’ve created a workspace
  • You have a Shopify store (any plan)
  • You have access to edit your theme code

​
Step 1: Get Your Tracking Code

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

​
Step 2: Add to Your Shopify Theme

​
Open Theme Editor

  1. In your Shopify admin, go to Online Store → Themes
  2. Find your current theme
  3. Click Actions → Edit code

​
Add to theme.liquid

  1. In the left sidebar, find and click theme.liquid (under Layout)
  2. Find the </head> closing tag
  3. Paste your DATALYR tracking script right before </head>:
  <script
    defer
    src="https://track.datalyr.com/dl.js"
    data-workspace-id="YOUR_WORKSPACE_ID">
  </script>
</head>
  1. Click Save

​
Step 3: Verify Tracking Works

  1. Visit your Shopify storefront in a new browser tab
  2. Browse a few products
  3. Go to your DATALYR dashboard
  4. Click Events in the sidebar
  5. You should see page_view events within 10 seconds
If you see events, you’re done!

​
What Gets Tracked Automatically

Once installed, DATALYR automatically captures:
  • Page views on all pages
  • Visitor IDs (persistent across sessions)
  • UTM parameters from ad campaigns
  • Ad click IDs (fbclid, gclid, ttclid)
  • Referrer and traffic source
  • Device and browser information

​
Track Shopify E-commerce Events

To track product views, add to cart, and purchases, add this code to your theme:

​
Track Product Views

In product.liquid or your product template, add: 
<script>
  if (window.datalyr) {
    datalyr.track('view_item', {
      product_id: '{{ product.id }}',
      product_name: '{{ product.title }}',
      product_price: {{ product.price | money_without_currency | remove: ',' }},
      currency: '{{ shop.currency }}',
      product_type: '{{ product.type }}',
      product_vendor: '{{ product.vendor }}'
    });
  }
</script>

​
Track Add to Cart

In your theme, find where “Add to Cart” is handled. Add this to your cart AJAX callback or form submission: 
if (window.datalyr) {
  datalyr.track('add_to_cart', {
    product_id: item.product_id,
    product_name: item.product_title,
    variant_id: item.variant_id,
    variant_name: item.variant_title,
    price: item.price / 100,
    quantity: item.quantity,
    currency: '{{ shop.currency }}'
  });
}

​
Track Purchases

Create a new snippet called datalyr-purchase.liquid in your Snippets folder: 
{% if first_time_accessed %}
<script>
  if (window.datalyr && window.Shopify && window.Shopify.checkout) {
    var checkout = {{ checkout | json }};
    var items = checkout.line_items.map(function(item) {
      return {
        product_id: item.product_id,
        variant_id: item.variant_id,
        name: item.title,
        price: item.price / 100,
        quantity: item.quantity
      };
    });

    datalyr.track('purchase', {
      order_id: checkout.order_id || checkout.order_number,
      revenue: checkout.total_price / 100,
      currency: checkout.currency,
      items: items,
      email: checkout.email,
      customer_id: checkout.customer_id
    });
  }
</script>
{% endif %}
Then add this snippet to your checkout → Order Status Page in Shopify Settings:
  1. Go to Settings → Checkout
  2. Scroll to Order status page → Additional scripts
  3. Add: {% include 'datalyr-purchase' %}

​
Track Custom Events

Track button clicks, form submissions, or any custom interaction: 
// Track newsletter signup
document.querySelector('#newsletter-form').addEventListener('submit', function() {
  if (window.datalyr) {
    datalyr.track('newsletter_signup', {
      form_location: 'footer'
    });
  }
});

// Track video play
document.querySelector('#product-video').addEventListener('play', function() {
  if (window.datalyr) {
    datalyr.track('video_play', {
      video_title: 'Product Demo',
      product_id: '{{ product.id }}'
    });
  }
});

​
Integrate with Shopify Customer Data

Track customer identification for cross-device attribution: 
{% if customer %}
<script>
  if (window.datalyr) {
    datalyr.identify('{{ customer.id }}', {
      email: '{{ customer.email }}',
      first_name: '{{ customer.first_name }}',
      last_name: '{{ customer.last_name }}',
      orders_count: {{ customer.orders_count }},
      total_spent: {{ customer.total_spent | money_without_currency | remove: ',' }}
    });
  }
</script>
{% endif %}
Add this to your theme.liquid file after the main DATALYR script.

​
Development vs Production

​
Test in Development Theme

  1. Create a duplicate of your theme for testing
  2. Install DATALYR on the duplicate theme first
  3. Preview and test thoroughly
  4. Once verified, add to your live theme

​
Use Different Workspaces

Create separate DATALYR workspaces for:
  • Development: Test theme with workspace ID dev_xxxxx
  • Production: Live theme with workspace ID prod_xxxxx
Use Liquid conditionals to switch workspace IDs: 
{% if shop.domain contains 'myshopify.com' %}
  {% assign workspace_id = 'dev_xxxxx' %}
{% else %}
  {% assign workspace_id = 'prod_xxxxx' %}
{% endif %}

<script
  defer
  src="https://track.datalyr.com/dl.js"
  data-workspace-id="{{ workspace_id }}">
</script>

​
Troubleshooting

Not seeing events? Check that:
  • Your tracking script is in the <head> section of theme.liquid
  • You’ve saved the file after editing
  • Your workspace ID is correct
  • Ad blockers are disabled
  • You’re testing on the live storefront (not /admin)
Events firing multiple times? Make sure you only have one instance of the DATALYR script in your theme. Search for track.datalyr.com in all theme files. Purchase tracking not working? Purchase tracking requires checkout access. Test with a real order using a test payment gateway or Shopify Payments in test mode. Liquid syntax errors? Make sure to close all Liquid tags properly. Use {% %} for logic and {{ }} for output.

​
Remove App Installation (If Applicable)

If you previously installed the DATALYR app:
  1. Go to Settings → Apps and sales channels
  2. Find DATALYR
  3. Click Uninstall
  4. Proceed with manual installation

​
Next Steps

Verify Tracking

Confirm events are tracking

Track Custom Events

Learn event tracking API

Connect Ad Accounts

Link Meta, Google, or TikTok Ads

View Your Dashboard

See your tracking data

​
Need Help?

Need help with custom Shopify tracking? Check our troubleshooting guide or contact support.