TugusDeveloper Docs
Plugins

WooCommerce Integration

Full e-commerce funnel for WooCommerce via WordPress hooks and a frontend script.

Full e-commerce funnel for WooCommerce via WordPress hooks plus a frontend script.

1. Include the script — functions.php

define('TH_API_KEY', 'th_YOUR_API_KEY');

add_action('wp_head', function() {
  echo '<script src="https://collect.tugus.io/v1/tg.min.js" data-key="' . TH_API_KEY . '" async></script>';
});

2. view_content — product page

add_action('woocommerce_after_single_product', function() {
  global $product;
  if (!$product) return;
  ?>
  <script>
  tugus.track('view_content', {
    content_id:   '<?= esc_js($product->get_sku() ?: $product->get_id()) ?>',
    content_name: '<?= esc_js($product->get_name()) ?>',
    content_type: 'product',
    value:        <?= (float) $product->get_price() ?>,
    currency:     '<?= get_woocommerce_currency() ?>',
  });
  </script>
  <?php
});

3. add_to_cart — cart

// Intercept the WooCommerce AJAX add-to-cart event
jQuery(document).on('added_to_cart', function(e, fragments, cart_hash, $btn) {
  tugus.track('add_to_cart', {
    content_id:   $btn.data('product_id')?.toString(),
    content_name: $btn.closest('.product').find('.woocommerce-loop-product__title').text().trim(),
    content_type: 'product',
    value:        parseFloat($btn.data('product_price') || 0),
    currency:     wc_add_to_cart_params?.currency || 'EUR',
    quantity:     parseInt($btn.closest('form').find('[name="quantity"]').val() || 1),
  })
})

4. initiate_checkout — checkout start

add_action('woocommerce_before_checkout_form', function() {
  $cart  = WC()->cart;
  $items = [];
  foreach ($cart->get_cart() as $item) {
    $product = $item['data'];
    $items[] = [
      'content_id'   => (string) ($product->get_sku() ?: $product->get_id()),
      'content_name' => $product->get_name(),
      'quantity'     => (int) $item['quantity'],
      'price'        => (float) $product->get_price(),
    ];
  }
  ?>
  <script>
  tugus.track('initiate_checkout', {
    value:     <?= (float) $cart->get_total('edit') ?>,
    currency:  '<?= get_woocommerce_currency() ?>',
    num_items: <?= $cart->get_cart_contents_count() ?>,
    contents:  <?= json_encode($items) ?>,
  });
  </script>
  <?php
});

5. purchase — order completion (server-side)

add_action('woocommerce_payment_complete', function($order_id) {
  $order = wc_get_order($order_id);
  $items = [];
  foreach ($order->get_items() as $item) {
    $product = $item->get_product();
    $items[] = [
      'content_id'   => (string) ($product?->get_sku() ?: $item->get_product_id()),
      'content_name' => $item->get_name(),
      'quantity'     => (int) $item->get_quantity(),
      'price'        => (float) ($item->get_total() / $item->get_quantity()),
    ];
  }

  wp_remote_post('https://collect.tugus.io/collect/' . TH_API_KEY, [
    'headers' => ['Content-Type' => 'application/json'],
    'body'    => json_encode([
      'event'    => 'purchase',
      'order_id' => (string) $order_id,
      'value'    => (float) $order->get_total(),
      'currency' => $order->get_currency(),
      'contents' => $items,
      'user'     => [
        'email'      => $order->get_billing_email(),
        'phone'      => $order->get_billing_phone(),
        'first_name' => $order->get_billing_first_name(),
        'last_name'  => $order->get_billing_last_name(),
        'zip'        => $order->get_billing_postcode(),
        'country'    => $order->get_billing_country(),
        'city'       => $order->get_billing_city(),
      ],
    ]),
  ]);
});

Overview: all events

EventTrigger
view_contentwoocommerce_after_single_product
add_to_cartjQuery added_to_cart
initiate_checkoutwoocommerce_before_checkout_form
purchasewoocommerce_payment_complete (server-side)

On this page