如何在OpenCart网站中添加Google eCommerce Tracking

Hey there! Let's get your Google Ecommerce Tracking up and running on your OpenCart store. I'll break this down into simple, actionable steps tailored to your existing code.

Step 1: Locate the Order Success Page Template #

First, you need to find the template file that loads when a customer completes an order. The path depends on your OpenCart version:

• OpenCart 3.x/4.x: Go to catalog/view/theme/[your-theme-name]/template/common/success.twig (replace [your-theme-name] with the actual theme you're using, e.g., default).
• OpenCart 2.x: The file is catalog/view/theme/[your-theme-name]/template/common/success.tpl (uses PHP syntax instead of Twig).

Pro tip: Always make a backup of this file before editing—just in case!

Step 2: Adapt Your Tracking Code to Use OpenCart's Dynamic Variables #

Your existing code has static values (like 1234 for the order ID) that we need to replace with dynamic variables from OpenCart's order data. Here's how to adjust it for each version:

For OpenCart 3.x/4.x (Twig Syntax) #

Replace your static code with this version, which pulls real order and product data:

<script type="text/javascript">
ga('require', 'ecommerce');
ga('ecommerce:addTransaction', {
  'id': '{{ order_id }}',                     // Dynamic order ID from OpenCart
  'affiliation': 'Kuberan Silks',             // Your store name (update if needed)
  'revenue': '{{ total }}',                   // Grand total of the order
  'shipping': '{{ shipping }}',               // Shipping cost for the order
  'tax': '{{ tax }}'                          // Tax amount for the order
});

{% for product in products %}
ga('ecommerce:addItem', {
  'id': '{{ order_id }}',                     // Match the transaction ID above
  'name': '{{ product.name }}',               // Name of the product
  'sku': '{{ product.sku }}',                 // Product SKU
  'category': '{{ product.category }}',       // Product category (if available)
  'price': '{{ product.price }}',             // Unit price of the product
  'quantity': '{{ product.quantity }}'        // Quantity ordered
});
{% endfor %}

ga('ecommerce:send');
</script>

For OpenCart 2.x (PHP Syntax) #

If you're on the older 2.x version, use this PHP-compatible code:

<script type="text/javascript">
ga('require', 'ecommerce');
ga('ecommerce:addTransaction', {
  'id': '<?php echo $order_id; ?>',
  'affiliation': 'Kuberan Silks',
  'revenue': '<?php echo $total; ?>',
  'shipping': '<?php echo $shipping; ?>',
  'tax': '<?php echo $tax; ?>'
});

<?php foreach ($products as $product) { ?>
ga('ecommerce:addItem', {
  'id': '<?php echo $order_id; ?>',
  'name': '<?php echo $product['name']; ?>',
  'sku': '<?php echo $product['sku']; ?>',
  'category': '<?php echo $product['category']; ?>',
  'price': '<?php echo $product['price']; ?>',
  'quantity': '<?php echo $product['quantity']; ?>'
});
<?php } ?>

ga('ecommerce:send');
</script>

Step 3: Place the Code in the Template #

Paste the adapted code at the bottom of the success template file, right before the closing </body> tag. This ensures the code only runs when a customer successfully completes an order.

Step 4: Test to Ensure It Works #

• Place a test order on your store (use a payment method that lets you simulate success, like Cash on Delivery).
• Use Google Analytics' Real-Time > Ecommerce report to check if the transaction shows up.
• You can also use Google's Tag Assistant browser extension to verify the tracking code fires correctly.

Note: If you're using the newer gtag.js (instead of the older analytics.js your code uses), let me know and I can adjust the code accordingly!

内容的提问来源于stack exchange，提问作者Raj