BlogPricingDashboardGitHubGitHub★ 902
Integrations

Shopify

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:

  1. Go to Online Store > Themes
  2. Click Actions > Edit code on your active theme
  3. Open theme.liquid in the Layout folder
  4. Add your Databuddy script before the closing </head> tag:
<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="YOUR_SITE_ID"
  data-track-attributes
  data-track-outgoing-links
  async
></script>

Method 2: Google Tag Manager

If you're using Google Tag Manager:

  1. In GTM, create a new Custom HTML tag
  2. Add the Databuddy script:
<script>
  (function() {
    var script = document.createElement('script');
    script.src = 'https://cdn.databuddy.cc/databuddy.js';
    script.setAttribute('data-client-id', 'YOUR_SITE_ID');
    script.setAttribute('data-track-screen-views', 'true');
    script.setAttribute('data-track-attributes', 'true');
    script.async = true;
    document.head.appendChild(script);
  })();
</script>
  1. Set trigger to All Pages
  2. 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

Add to your thank-you.liquid or checkout success page:

{% if first_time_accessed %}
<script>
  window.addEventListener('load', function() {
    if (window.databuddy) {
      databuddy.track('purchase', {
        transaction_id: '{{ order.order_number }}',
        value: {{ order.total_price | divided_by: 100.0 }},
        currency: '{{ order.currency }}',
        tax: {{ order.tax_price | divided_by: 100.0 }},
        shipping: {{ order.shipping_price | divided_by: 100.0 }},
        coupon: '{{ order.discount_codes.first.code }}',
        items: [
          {% for line_item in order.line_items %}
          {
            item_id: '{{ line_item.product_id }}',
            item_name: '{{ line_item.title | escape }}',
            item_category: '{{ line_item.product.type | escape }}',
            item_variant: '{{ line_item.variant.title | escape }}',
            quantity: {{ line_item.quantity }},
            price: {{ line_item.price | divided_by: 100.0 }}
          }{% unless forloop.last %},{% endunless %}
          {% endfor %}
        ]
      });
    }
  });
</script>
{% endif %}

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>

Track Newsletter Signups

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:

  1. Create a new Flow in Shopify admin
  2. Set trigger (e.g., "Order created")
  3. Add HTTP request action:
    • URL: https://api.databuddy.cc/events
    • Method: POST
    • Headers: Authorization: Bearer YOUR_API_KEY
    • Body: Order data in JSON format

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.setAttribute('data-client-id', 'YOUR_SITE_ID');
    script.setAttribute('data-track-screen-views', 'true');
    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_SITE_ID"
  data-track-attributes
  data-sampling-rate="0.1"
  async
></script>

Compliance and Privacy

GDPR Compliance

Databuddy is GDPR compliant by default, but you can add additional privacy controls:

<!-- Show only for EU users -->
{% if localization.country.iso_code == 'EU' %}
<script>
  // Initialize Databuddy with privacy mode
  window.databuddyConfig = {
    privacy_mode: true,
    minimal_tracking: true
  };
</script>
{% endif %}

Cookie Consent Integration

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.setAttribute('data-client-id', 'YOUR_SITE_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 Site 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:

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

Debug Mode

Enable debug mode for development:

<script
  src="https://cdn.databuddy.cc/databuddy.js"
  data-client-id="YOUR_SITE_ID"
  data-debug
  async
></script>

Related Integrations

Stripe

Payment tracking for comprehensive conversion analytics.

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 help@databuddy.cc.

How is this guide?

Edit on GitHub