Shopify

<script src="https://tag.grainql.com/v4/your-tenant-id.js"></script>
<script>
  GrainTag.track('page_context', {
    page_type: '{{ template }}',
    shop: '{{ shop.name }}',
    currency: '{{ shop.currency }}'
  });
</script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const cartForms = document.querySelectorAll('form[action*="/cart/add"]');

    cartForms.forEach(function(form) {
      form.addEventListener('submit', function() {
        const variantId = form.querySelector('[name="id"]')?.value;
        const quantity = form.querySelector('[name="quantity"]')?.value || 1;

        GrainTag.track('product_added_to_cart', {
          variant_id: variantId,
          quantity: parseInt(quantity)
        });
      });
    });
  });
</script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const checkoutButtons = document.querySelectorAll('button[name="checkout"], a[href*="/checkout"]');

    checkoutButtons.forEach(function(button) {
      button.addEventListener('click', function() {
        GrainTag.track('checkout_started', {
          page: window.location.pathname
        });
      });
    });
  });
</script>

<script src="https://tag.grainql.com/v4/your-tenant-id.js"></script>
<script>
  GrainTag.track('purchase_completed', {
    order_id: '{{ checkout.order_id }}',
    total: {{ checkout.total_price | money_without_currency }},
    currency: '{{ checkout.currency }}',
    discount: {{ checkout.total_discounts | money_without_currency }},
    shipping: {{ checkout.shipping_price | money_without_currency }}
  });
</script>

{% if template == 'product' %}
<script>
  GrainTag.track('product_viewed', {
    product_id: '{{ product.id }}',
    product_title: '{{ product.title }}',
    price: {{ product.price | money_without_currency }},
    vendor: '{{ product.vendor }}',
    available: {{ product.available }}
  });
</script>
{% endif %}

{% if template == 'search' %}
<script>
  GrainTag.track('search_performed', {
    query: '{{ search.terms }}',
    results_count: {{ search.results.size }}
  });
</script>
{% endif %}