Overview
This case study documents the end-to-end process of integrating, debugging, and refining Amazon Ad Tag event tracking for a Shopify e-commerce store. The goal was to capture key user actions (such as Add to Cart, Product View, Collection View, and Purchase) and send them to Amazon DSP for remarketing, while ensuring data accuracy and compliance with privacy and technical constraints.
1. Initial Requirements
- Integrate Amazon Ad Tag base code into the Shopify theme.
- Track user events: PageView, ProductView, AddToCart, CollectionView, Search, and Purchase.
- Ensure all required event attributes (e.g., value, productId, productTitle) are captured and sent.
- Avoid inline scripts to comply with Shopify’s Content Security Policy (CSP).
- Make the solution robust to theme changes and dynamic content.
2. Implementation Steps
A. Base Tag Integration
- Verified that the Amazon Ad Tag base code was already present in theme.liquid.
- Ensured the base tag loaded on every page.
B. Event Tracking Script
- Created assets/amazon-ad-tracking.js to handle all event tracking logic.
- Added listeners for:
- PageView (on every page load)
- ProductView (on product pages)
- AddToCart (on form submit and AJAX cart events)
- CollectionView (on collection pages)
- Search (on search form submit)
- Purchase (on order confirmation page)
- Used only external JS, passing dynamic data via selectors and attributes.
C. Data Extraction and Selectors
- Used semantic selectors to extract product and collection data from the DOM.
- For product price, used:
document.querySelector(‘span.f-price-item.f-price-item–regular’)
- For collection title, used:
document.querySelector(‘.slideshow__title’)
- Added .trim() and regex cleaning to ensure price was parsed as a float.
D. Debugging and Validation
- Added console logging to verify event payloads and selector results.
- Used browser DevTools to inspect the DOM and test selectors.
- Validated that events were firing with correct data by checking Amazon’s event logs and browser console output.
E. Handling Edge Cases
- Ensured the script worked with AJAX navigation and dynamic content.
- Added fallbacks for missing data (e.g., using collection handle if ID was unavailable).
- Filtered out empty/null/undefined values before sending events to avoid Amazon warnings.
- Removed all logging and debug code for production deployment.
3. Technical Challenges & Solutions
A. Content Security Policy (CSP) Restrictions
- Challenge: Shopify blocks inline scripts, so all tracking logic had to be in external JS files.
- Solution: Moved all event logic to amazon-ad-tracking.js and passed data via DOM selectors.
B. Dynamic Content and AJAX Navigation
- Challenge: Some events (like AddToCart) are triggered by AJAX, not native form submits.
- Solution: Listened for both form submit and custom cart events (e.g., cart:item:added).
C. Selector Robustness
- Challenge: Product price and collection title selectors needed to be precise and robust to theme changes.
- Solution: Used browser inspection to find the exact selectors and added .trim() and regex cleaning for price extraction.
D. Data Quality and Event Validation
- Challenge: Amazon requires all event attributes to have valid values; missing or zero values cause warnings.
- Solution: Filtered out empty values, ensured price was always a float, and validated event payloads in the console.
4. Key Code Snippets
Product Price Extraction:
getProductPrice() {
const priceElement = document.querySelector(‘span.f-price-item.f-price-item–regular’);
if (priceElement) {
const priceText = priceElement.textContent.trim().replace(/[^0-9.]/g, ”);
return parseFloat(priceText) || 0;
}
return 0;
}
AddToCart Event:
this.sendAmazonEvent(“AddToCart”, {
productId: productId,
productTitle: productTitle || ”,
value: value, // price * quantity
currencyCode: window.Shopify?.currency?.active || ‘USD’,
quantity: quantity,
variantId: variantId || variant?.id || ”,
variantTitle: variant?.title || ”,
clientDedupeId: `add_to_cart_${productId}_${Date.now()}`
});
Collection Title Extraction:
const collectionTitle = document.querySelector(‘.slideshow__title’)?.textContent?.trim() || ”;
5. Lessons Learned & Best Practices
- Always inspect the live DOM to find the most reliable selectors for dynamic data.
- Use .trim() and regex to clean up extracted text before parsing numbers.
- Listen for both native and custom events (like AJAX cart events) to ensure all user actions are tracked.
- Validate event payloads in the browser console and Amazon’s event logs.
- Remove all debug code before deploying to production.
- Document selectors and logic so future theme changes can be quickly accommodated.
6. Outcome
- All required Amazon Ad Tag events are now tracked with accurate, validated data.
- The solution is robust to theme changes and dynamic content.
- The store is ready for Amazon DSP remarketing with high-quality event data.
7. Next Steps
- Monitor Amazon event logs for any new warnings or missing data.
- Update selectors if the theme is changed or upgraded.
- Consider adding more granular events (e.g., RemoveFromCart, Wishlist) as needed.
This case study serves as a reference for future analytics and tracking integrations on Shopify or similar e-commerce platforms.