Shopify Integration

Full e-commerce funnel for Shopify via theme.liquid, Web Pixels, and the Order Status Page.

Full e-commerce funnel for Shopify. Integrated via theme.liquid for storefront events, and Shopify Web Pixels or checkout.liquid for checkout events.

Shopify no longer allows direct theme code from the checkout page onwards (Shopify Plus excepted). For purchase events, use the Order Status Page or the Web Pixels API.

1. Include the script — theme.liquid

{%- comment -%} Tugus — as early as possible in the <head> {%- endcomment -%}
<script
  src="https://collect.tugus.io/v1/tg.min.js"
  data-key="tg_YOUR_API_KEY"
  async
></script>

2. view_content — product page

In sections/main-product.liquid or at the end of templates/product.liquid:

<script>
tugus.track('view_content', {
  content_id:       '{{ product.selected_or_first_available_variant.sku }}',
  content_name:     '{{ product.title | escape }}',
  content_type:     'product',
  content_category: '{{ product.type | escape }}',
  value:            {{ product.selected_or_first_available_variant.price | divided_by: 100.0 }},
  currency:         '{{ shop.currency }}',
})
</script>

3. add_to_cart — cart

Via a JavaScript event on the add-to-cart button click:

// Intercept ATC via fetch() (Dawn theme pattern)
document.addEventListener('click', (e) => {
  const btn = e.target.closest('[data-add-to-cart], .product-form__submit')
  if (!btn) return

  const form = btn.closest('form')
  const variantId = form?.querySelector('[name="id"]')?.value

  // Product data from data attribute or Shopify global
  const price = parseFloat(btn.dataset.price || 0) / 100

  tugus.track('add_to_cart', {
    content_id:   variantId,
    content_name: btn.dataset.productTitle || document.title,
    content_type: 'product',
    value:        price,
    currency:     window.Shopify?.currency?.active || 'EUR',
    quantity:     parseInt(form?.querySelector('[name="quantity"]')?.value || 1),
  })
})

4. initiate_checkout — checkout start

On the cart page, when the "Checkout" button is clicked:

<script>
// The Shopify cart object is available on the cart page
document.querySelector('[name="checkout"]')
  ?.addEventListener('click', () => {
    const cart = {{ cart | json }}

    tugus.track('initiate_checkout', {
      value:     (cart.total_price / 100).toFixed(2),
      currency:  cart.currency,
      num_items: cart.item_count,
      contents:  cart.items.map(item => ({
        content_id:   item.variant_id.toString(),
        content_name: item.product_title,
        quantity:     item.quantity,
        price:        (item.price / 100).toFixed(2),
      })),
    })
  })
</script>

5. purchase — order completion

On the Order Status Page (Settings → Checkout → Additional Scripts):

{% if first_time_accessed %}
<script
  src="https://collect.tugus.io/v1/tg.min.js"
  data-key="tg_YOUR_API_KEY"
  async
></script>
<script>
tugus.track('purchase', {
  order_id:  '{{ order.order_number }}',
  value:     {{ order.total_price | money_without_currency | remove: ',' }},
  currency:  '{{ shop.currency }}',
  num_items: {{ order.line_items | size }},
  contents: [
    {% for line_item in order.line_items %}
    {
      content_id:   '{{ line_item.variant_id }}',
      content_name: '{{ line_item.title | escape }}',
      quantity:     {{ line_item.quantity }},
      price:        {{ line_item.price | money_without_currency | remove: ',' }},
    }{% unless forloop.last %},{% endunless %}
    {% endfor %}
  ],
  user: {
    email:      '{{ customer.email }}',
    phone:      '{{ customer.phone }}',
    first_name: '{{ customer.first_name | escape }}',
    last_name:  '{{ customer.last_name | escape }}',
    zip:        '{{ customer.default_address.zip }}',
    country:    '{{ customer.default_address.country_code }}',
    city:       '{{ customer.default_address.city | escape }}',
  },
})
</script>
{% endif %}

6. search — site search

{% if search.performed %}
<script>
tugus.track('search', {
  search_string: '{{ search.terms | escape }}',
  results:       {{ search.results_count }},
})
</script>
{% endif %}

Overview: all events

Event	Trigger
`pageview`	Automatic on every page view
`view_content`	Product detail page — `product.liquid`
`add_to_cart`	ATC click via JS event listener
`initiate_checkout`	Cart page, click on Checkout
`purchase`	Order Status Page, `first_time_accessed`
`search`	Search results page — `search.liquid`