Tracking eCommerce purchases

Introduction to eCommerce Tracking

This guide explains how to set up eCommerce tracking using Google Analytics and Google Ads, specifically tailored for Vendure eCommerce and front-end JavaScript frameworks like Astro, React, Vue, or Angular.

Prerequisites

• Google Analytics (GA4) account
• Google Ads account
• Google Tag Manager (optional but recommended)
• Vendure eCommerce system
• Your JavaScript front-end framework

Step 1: Enable eCommerce in Google Analytics

In Google Analytics, go to Admin → Property Settings → Enable Enhanced eCommerce.

Step 2: Set Up Google Tag Manager (GTM) for Your JavaScript Framework Website

GTM Tag Configuration

1. Create new tags for key eCommerce events like view_item, add_to_cart, and purchase.
2. Use custom JavaScript variables in GTM to fetch relevant data (e.g., transaction ID, revenue) from your Vendure store.

Step 3: Implement the DataLayer in Your Front-End

A DataLayer is a critical component for dynamic tracking. Push transaction data to the DataLayer whenever an event happens, such as an order being placed.

Example code:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'purchase',
  transaction_id: 'ORDER123',
  value: 100.00,
  currency: 'USD',
  items: [
    {
      item_name: 'Product 1',
      price: 50.00,
      quantity: 2
    }
  ]
});

Step 4: Link Google Analytics & Google Ads

1. In Google Ads, link your Google Analytics property.
2. Import eCommerce conversion goals (e.g., purchase events) from Google Analytics into Google Ads to track ad performance.

Step 5: Testing and Debugging

Use Google Analytics’ DebugView and Google Tag Manager’s Preview mode to ensure data flows correctly from your JavaScript front-end and Vendure system into both Google Analytics and Google Ads.

Step 6: Optimize Campaigns in Google Ads

Monitor your eCommerce performance in Google Ads, focusing on the imported purchase conversions. Adjust bids, targeting, or creative based on conversion data.

Bonus: Using Vendure Campaigns for URL Tracking

Our new campaign tracking makes it easy to track ad performance via the new Campaigns feature. This tool lets you generate unique query parameters that you can attach to the URLs of your ad landing pages.

When users click on an ad and visit the URL containing the campaign parameter, Vendure tracks the visit and any resulting conversions. This additional layer of tracking helps you:

• Measure the success of specific campaigns in a GDPR-proof way.
• Gain insights into which ads drive the most revenue and show this data directly in your Vendure dashboard.

To Set Up a Campaign:

1. Log in to your Vendure admin interface.
2. Navigate to the Campaigns section on the bottom left side of the screen.
3. Create a new campaign and query parameter.
4. Copy and add the query parameter to your ad's landing page URL (e.g., in Google Ads).
5. By combining Vendure campaigns with Google Analytics and Google Ads tracking, you’ll have a comprehensive view of your eCommerce performance.

To Summarize:

• Enable eCommerce tracking in Google Analytics.
• Set up Google Tag Manager to handle SPA route changes and eCommerce events.
• Implement the DataLayer in your JavaScript front-end for dynamic event tracking.
• Link Google Analytics & Google Ads for conversion tracking.
• Test and debug using available tools.
• Optimize campaigns based on data insights.

This ensures accurate tracking and reporting for your eCommerce setup.

---

Need help implementing eCommerce tracking for your website? Whether you’re setting up Google Analytics, configuring GTM, or integrating with Vendure, we’re here to help!

niels@pinelab.studio

Frequently Asked Questions

Q: On which pages should I place my tags via GTM?

Your tags should be placed on:

• All pages where important events occur, such as:
  • Product pages (for view_item).
  • Cart pages (for add_to_cart).
  • Checkout pages (for begin_checkout and purchase).

Also, ensure GTM works properly on routes within your Single Page Application (SPA).

Q: Can I make it work without GTM?

Yes, you can implement tracking without GTM by directly embedding tracking scripts in your front-end code. For instance:

Implement the Google Analytics Global Site Tag (gtag.js) and manually send events using the gtag method.

However, GTM offers advantages like easier management, debugging, and flexible adjustments without requiring code updates.

Q: Do I need cross-domain tracking?

You need cross-domain tracking if users navigate across multiple domains, such as an external payment provider or a separate blog domain. This ensures sessions and user data remain consistent. If you use only one domain, cross-domain tracking is unnecessary.

Q: Is this method GDPR/privacy-proof?

Yes, this method can be GDPR-compliant if:

• You integrate a Cookie Consent Manager to ensure user consent before activating tracking.
• You enable IP anonymization in Google Analytics.
• You ensure no personal data (e.g., customer names, emails) is included in the DataLayer.
• Update your privacy policy to inform users about data processing.

Q: Is there a difference for Google Ads Shopping campaigns?

Yes, ensure your product IDs in eCommerce tracking match those in your Google Merchant Center feed. This helps link ad performance to purchases effectively.

Q: I am a marketplace; can I still track purchases?

Yes, marketplaces can track purchases. You may need to include additional information in your DataLayer, such as vendor details or revenue splits, depending on your reporting needs.

Q: Is there a Vendure Pixel available?

Currently, Vendure does not offer a ready-made "pixel" like Facebook (Meta) or Google. However, you can use Vendure's APIs to create custom tracking solutions or set up a reusable GTM container.

Q: Can you implement the tracking for me?

Yes, implementation support can be provided, including:

• Setting up Google Tag Manager and DataLayer.
• Linking Google Analytics and Google Ads.
• Testing and optimizing the setup.

Feel free to reach out to discuss your specific needs via niels@pinelab.studio