Shopify Eulerian Marketing Platform Integration

This custom pixel allows you to integrate Eulerian Marketing Platform tracking with your Shopify store using the Web Pixels API.

🚀 Features

• Page View Tracking: Track general page views (excluding product, cart, and checkout pages)
• Product View Tracking: Track when customers view product pages
• Add to Cart Tracking: Track when customers add products to their cart
• Purchase Tracking: Track completed purchases with order details and line items
• Smart Context Detection: Prevents duplicate tracking calls by detecting page context
• Debug Mode: Built-in logging for easy testing and troubleshooting

📋 Prerequisites

• Shopify store with access to admin settings
• Eulerian Marketing Platform account with your tracking subdomain -> Create a free account !
• Basic understanding of Shopify admin interface

🔧 Installation Steps

1. Configure Your Tracking Domain

Before installing, you need to update the configuration with your tracking domain:

const CONFIG = {
  scriptSrc: "https://YOUR-TRACKING-DOMAIN/ea.js", // Replace with your domain
  debug: true // Keep true for testing, set to false for production
};

⚠️ Important: Replace YOUR-TRACKING-DOMAIN with your actual Eulerian tracking domain.

2. Install the Custom Pixel

1. Access Shopify Admin

   • Log into your Shopify admin panel
   • Navigate to Settings → Customer events

2. Add Custom Pixel

   • Click Custom Pixels
   • Click Add pixel

3. Configure Pixel Details

   • Pixel name: Enter a descriptive name (e.g., "Eulerian Marketing Platform")
   • Code: Copy the complete JavaScript code from snippet/generic.js in this repository
   • Make sure you've updated the scriptSrc with your domain

4. Save and Connect

   • Click Save
   • Click Connect to activate the pixel

🧪 Testing Your Integration

Monitor Console Logs

With debug: true, the pixel will log all tracking activities to the browser console:

1. Open Browser Developer Tools

   • Press F12 or right-click → Inspect
   • Go to the Console tab

2. Expected Log Messages

   🚀 Tracking script loaded successfully
   📊 Subscribed to page_viewed
   📊 Subscribed to product_added_to_cart
   📊 Subscribed to checkout_completed
   📊 Subscribed to product_viewed
   
   ✅ Page view tracked
   ✅ Product view tracked
   ✅ Add to cart tracked
   ✅ Checkout completed tracked
   

Test Different Page Types

Test each tracking scenario:

1. Generic Pages: Visit homepage, about page, contact page

   • Should see: ✅ Page view tracked

2. Product Pages: Visit any product page

   • Should see: ✅ Product view tracked
   • Should NOT see page view tracking

3. Add to Cart: Add a product to cart

   • Should see: ✅ Add to cart tracked

4. Complete Purchase: Make a test purchase

   • Should see: ✅ Checkout completed tracked

Verify Data Transmission

Check that data is being sent to Eulerian Marketing Platform:

1. Network Tab: Monitor network requests in developer tools
2. Look for requests to your tracking domain
3. Verify parameters are being sent correctly

🔍 Troubleshooting

Common Issues

Issue	Solution
No console logs appearing	Check that debug: true in CONFIG
Script not loading	Verify your scriptSrc URL is correct
Events not firing	Check Shopify's Customer Events are enabled
Missing data	Verify the event data structure matches expectations

Debug Mode Messages

Message	Meaning
✅ [Event] tracked	Event successfully sent to Eulerian Marketing Platform
🚫 Skipped [event]	Event skipped due to page context rules
❌ EA_collector not available	Eulerian tracking library script not loaded
❌ [Data] not found	Required event data is missing

🎯 Tracked Events

The pixel automatically tracks these customer events:

Event	Trigger	Data Captured
page_viewed	Generic page visits	User ID, Event type, URL
product_viewed	Product page visits	User ID, Product ID, Product name, Category
product_added_to_cart	Add to cart action	User ID, Product details, Price, Category
checkout_completed	Purchase completion	User ID, Order ID, Total amount, Line items

⚠️ Before Going Live

Production Checklist

• Set debug to false: Change CONFIG.debug to false
• Test all events: Verify tracking works on all page types
• Check Eulerian dashboard: Confirm data appears in your analytics
• Monitor for errors: Watch for console errors after going live

const CONFIG = {
  scriptSrc: "https://YOUR-TRACKING-DOMAIN/ea.js",
  debug: false // Set to false for production!
};

📞 Support

For technical support:

1. Check console logs with debug mode enabled
2. Verify your Eulerian subdomain is correct
3. Test with different browsers to isolate issues
4. Contact your Eulerian Marketing Platform support team for analytics-specific questions

📄 License

This integration code is provided as-is for Eulerian Marketing Platform customers.

---

Need help? Make sure to test thoroughly with debug: true before switching to production mode!