Add Databuddy's privacy-first analytics to your Shopify store to track customer behavior, e-commerce events, and improve conversion rates while maintaining GDPR compliance.

Installation Methods

Method 1: Theme Code (Recommended)

Add Databuddy directly to your Shopify theme:

Go to Online Store > Themes
Click the ... button on your active theme, then Edit code
Open theme.liquid in the Layout folder
Add your Databuddy script before the closing </head> tag:

<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="YOUR_CLIENT_ID"
  data-track-attributes
  data-track-outgoing-links
  crossorigin="anonymous"
  async
></script>

Method 2: Google Tag Manager

If you're using Google Tag Manager:

In GTM, create a new Custom HTML tag
Add the Databuddy script:

<script>
  (function() {
    var script = document.createElement('script');
    script.src = 'https://cdn.databuddy.cc/databuddy.js';
    script.crossOrigin = 'anonymous';
    script.setAttribute('data-client-id', 'YOUR_CLIENT_ID');
    script.setAttribute('data-track-attributes', 'true');
    script.async = true;
    document.head.appendChild(script);
  })();
</script>

Set trigger to All Pages
Publish the container

E-commerce Tracking

Track Product Views

Add to your product.liquid template:

<script>
  window.addEventListener('load', function() {
    if (window.databuddy) {
      databuddy.track('product_view', {
        product_id: '{{ product.id }}',
        product_name: '{{ product.title | escape }}',
        product_category: '{{ product.type | escape }}',
        product_vendor: '{{ product.vendor | escape }}',
        product_price: {{ product.price | divided_by: 100.0 }},
        currency: '{{ cart.currency.iso_code }}',
        product_variant: '{{ product.selected_or_first_available_variant.title | escape }}'
      });
    }
  });
</script>

Track Add to Cart

Add to your product form or use data attributes:

<!-- Method 1: Data attributes (automatic) -->
<button 
  type="submit" 
  name="add" 
  class="btn product-form__cart-submit"
  data-track="add_to_cart"
  data-product-id="{{ product.id }}"
  data-product-name="{{ product.title | escape }}"
  data-value="{{ product.price | divided_by: 100.0 }}"
  data-currency="{{ cart.currency.iso_code }}"
>
  Add to Cart
</button>

<!-- Method 2: Custom JavaScript -->
<script>
  document.querySelector('.product-form__cart-submit').addEventListener('click', function() {
    if (window.databuddy) {
      databuddy.track('add_to_cart', {
        product_id: '{{ product.id }}',
        product_name: '{{ product.title | escape }}',
        value: {{ product.price | divided_by: 100.0 }},
        currency: '{{ cart.currency.iso_code }}',
        quantity: 1
      });
    }
  });
</script>

Track Purchases

Scripts added to theme.liquid do not run on checkout or the thank-you page, so the storefront snippet above cannot see purchases. Checkout events require Shopify's Web Pixels API.

Create a custom pixel under Settings > Customer events > Add custom pixel and send the event to Databuddy's HTTP API:

analytics.subscribe('checkout_completed', (event) => {
  const checkout = event.data.checkout;

  fetch('https://basket.databuddy.cc/track', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      name: 'purchase',
      websiteId: 'YOUR_CLIENT_ID',
      properties: {
        transaction_id: checkout.order?.id,
        value: checkout.totalPrice?.amount,
        currency: checkout.currencyCode,
        item_count: checkout.lineItems.length
      }
    })
  });
});

Customer Behavior Tracking

Track Search Events

Add to your search.liquid template:

{% if search.performed %}
<script>
  window.addEventListener('load', function() {
    if (window.databuddy) {
      databuddy.track('search', {
        search_term: '{{ search.terms | escape }}',
        results_count: {{ search.results.size }},
        page: 'search'
      });
    }
  });
</script>
{% endif %}

Track Collection Views

Add to your collection.liquid template:

<script>
  window.addEventListener('load', function() {
    if (window.databuddy) {
      databuddy.track('collection_view', {
        collection_id: '{{ collection.id }}',
        collection_name: '{{ collection.title | escape }}',
        collection_handle: '{{ collection.handle }}',
        products_count: {{ collection.products.size }}
      });
    }
  });
</script>

For newsletter forms:

<form 
  action="/contact#contact_form" 
  method="post" 
  class="newsletter-form"
  data-track="newsletter_signup"
  data-form-location="footer"
>
  <input type="email" name="contact[email]" placeholder="Your email">
  <button type="submit">Subscribe</button>
</form>

Advanced Configuration

Customer Identification

Track logged-in customers:

{% if customer %}
<script>
  window.addEventListener('load', function() {
    if (window.databuddy) {
      databuddy.identify('{{ customer.id }}', {
        email: '{{ customer.email | escape }}',
        first_name: '{{ customer.first_name | escape }}',
        last_name: '{{ customer.last_name | escape }}',
        customer_since: '{{ customer.created_at | date: "%Y-%m-%d" }}',
        total_orders: {{ customer.orders_count }},
        total_spent: {{ customer.total_spent | divided_by: 100.0 }}
      });
    }
  });
</script>
{% endif %}

Cart Abandonment Tracking

Track when users add items but don't complete purchase:

<script>
  // Track cart updates
  document.addEventListener('cart:updated', function(event) {
    if (window.databuddy && event.detail.cart.item_count > 0) {
      databuddy.track('cart_updated', {
        cart_value: event.detail.cart.total_price / 100,
        item_count: event.detail.cart.item_count,
        currency: '{{ cart.currency.iso_code }}'
      });
    }
  });
</script>

Shopify Plus Features

Checkout Extensions

For Shopify Plus stores using checkout extensions:

// In your checkout extension
import { extension, Banner } from '@shopify/ui-extensions/checkout';

extension('purchase.checkout.block.render', (root, api) => {
  const { analytics } = api;
  
  // Track checkout steps
  analytics.track('checkout_step', {
    step: 'information',
    checkout_id: api.checkoutToken
  });
});

Flow Integration

Use Shopify Flow to trigger Databuddy events:

Create a new Flow in Shopify admin
Set trigger (e.g., "Order created")
Add HTTP request action:
- URL: https://basket.databuddy.cc/track
- Method: POST
- Headers: Authorization: Bearer YOUR_API_KEY and Content-Type: application/json
- Body: JSON with name, websiteId, properties, and source

{
  "name": "order_created",
  "websiteId": "your-client-id",
  "properties": {
    "order_id": "{{ order.id }}",
    "status": "{{ order.displayFinancialStatus }}"
  },
  "source": "shopify_flow"
}

Performance Optimization

Lazy Loading

Load Databuddy after critical resources:

<script>
  window.addEventListener('load', function() {
    // Load Databuddy after page is fully loaded
    var script = document.createElement('script');
    script.src = 'https://cdn.databuddy.cc/databuddy.js';
    script.crossOrigin = 'anonymous';
    script.setAttribute('data-client-id', 'YOUR_CLIENT_ID');
    script.async = true;
    document.head.appendChild(script);
  });
</script>

Mobile Optimization

Optimize for mobile users:

<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="YOUR_CLIENT_ID"
  data-track-attributes
  data-sampling-rate="0.1"
  crossorigin="anonymous"
  async
></script>

Compliance and Privacy

Databuddy is GDPR compliant by default: it uses no cookies and anonymizes visitors, so no extra privacy configuration is needed.

If using a cookie consent banner:

// Wait for consent before tracking
function initializeDatabuddy() {
  var script = document.createElement('script');
  script.src = 'https://cdn.databuddy.cc/databuddy.js';
  script.crossOrigin = 'anonymous';
  script.setAttribute('data-client-id', 'YOUR_CLIENT_ID');
  script.async = true;
  document.head.appendChild(script);
}

// Call after user accepts cookies
document.addEventListener('cookieConsentAccepted', initializeDatabuddy);

Troubleshooting

Common Issues

Script Not Loading: Check if your theme has Content Security Policy restrictions.

Events Not Tracking: Verify that your Client ID is correct and the script is loading without errors.

Liquid Syntax Errors: Ensure all Liquid variables are properly escaped and quoted.

Testing

Test your implementation:

Use Shopify's preview theme feature
Check browser console for any JavaScript errors
Verify events in your Databuddy dashboard
Test on mobile devices

Next.js

App Router and Pages Router setup for Next.js apps.

Google Tag Manager

GTM integration for managing multiple marketing tools.

WordPress

Plugin or manual setup for WordPress sites.

Need help with your Shopify integration? Contact us at support@databuddy.cc.

Shopify