Shopify
Add privacy-first analytics to your Shopify store
Shopify Integration
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 Actions > Edit code on your active theme
- Open
theme.liquid
in the Layout folder - Add your Databuddy script before the closing
</head>
tag:
<script
src="https://app.databuddy.cc/databuddy.js"
data-client-id="YOUR_SITE_ID"
data-track-screen-views="true"
data-track-attributes="true"
data-track-outgoing-links="true"
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://app.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>
- 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
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:
- Create a new Flow in Shopify admin
- Set trigger (e.g., "Order created")
- Add HTTP request action:
- URL:
https://api.databuddy.cc/events
- Method: POST
- Headers:
Authorization: Bearer YOUR_API_KEY
- Body: Order data in JSON format
- URL:
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://app.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://app.databuddy.cc/databuddy.js"
data-client-id="YOUR_SITE_ID"
data-track-screen-views="true"
data-track-attributes="true"
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://app.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:
- Use Shopify's preview theme feature
- Check browser console for any JavaScript errors
- Verify events in your Databuddy dashboard
- Test on mobile devices
Debug Mode
Enable debug mode for development:
<script
src="https://app.databuddy.cc/databuddy.js"
data-client-id="YOUR_SITE_ID"
data-debug="true"
async
></script>
Need help with your Shopify integration? Contact us at help@databuddy.cc.