Setting Up Pinterest Conversion API for OpenCart with Product Catalog Events

Standard

Pinterest Conversion API (CAPI) enables direct server-side tracking of conversion events. Combined with product catalog events from OpenCart, this setup enhances signal quality and supports dynamic retargeting and shopping campaigns.


๐Ÿงฐ Prerequisites

  • OpenCart store with product catalog
  • GTM Web + Server containers configured
  • Pinterest Business account with Tag ID and CAPI Token
  • Product ID mapping in OpenCart
  • HTTPS domain and consent layer

๐Ÿงฑ Step 1: Add Pinterest Tag in GTM Web (Client-Side)

  1. Tag Type: Custom HTML
  2. Trigger: All Pages
<script>
!function(e){if(!window.pintrk){window.pintrk = function () {
window.pintrk.queue.push(Array.prototype.slice.call(arguments))};
var n=window.pintrk;n.queue=[],n.version="3.0";
var t=document.createElement("script");t.async=!0,
t.src=e;var r=document.getElementsByTagName("script")[0];
r.parentNode.insertBefore(t,r)}}("https://s.pinimg.com/ct/core.js");

pintrk('load', 'YOUR_TAG_ID');
pintrk('page');
</script>
<noscript>
<img height="1" width="1" style="display:none;" alt=""
src="https://ct.pinterest.com/v3/?event=init&tid=YOUR_TAG_ID" />
</noscript>

๐Ÿ›’ Step 2: Push Purchase Event with Product Data

In success.twig:

<script>
dataLayer = dataLayer || [];
dataLayer.push({
  event: 'purchase',
  event_id: 'pin_{{ order_id }}',
  transaction_id: '{{ order_id }}',
  value: {{ order_total }},
  currency: '{{ currency }}',
  line_items: [
    {% for product in products %}
    {
      product_id: '{{ product.model }}',
      product_name: '{{ product.name }}',
      quantity: {{ product.quantity }},
      price: {{ product.price }}
    },
    {% endfor %}
  ],
  email: '{{ email | lower | sha256 }}',
  phone: '{{ phone | regex_replace('/\D/', '') | sha256 }}'
});
</script>

๐ŸŒ Step 3: Send Payload to GTM Server via Web Tag

GTM Web โ†’ New Tag โ†’ Custom HTML โ†’ Trigger: purchase

<script>
fetch('https://gtm.yourdomain.com/event', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    event_name: 'checkout',
    event_id: '{{DL - event_id}}',
    transaction_id: '{{DL - transaction_id}}',
    value: '{{DL - value}}',
    currency: '{{DL - currency}}',
    line_items: {{DL - line_items}},
    email: '{{DL - email}}',
    phone: '{{DL - phone}}'
  })
});
</script>

๐Ÿ“ก Step 4: Configure Pinterest CAPI in GTM Server

  1. Trigger: event_name equals checkout
  2. Tag Type: HTTP Request
POST https://api.pinterest.com/v5/events
Authorization: Bearer YOUR_CAPI_TOKEN
Content-Type: application/json

{
  "event_name": "checkout",
  "event_time": {{timestamp}},
  "action_source": "website",
  "event_id": "{{event_id}}",
  "user_data": {
    "em": "{{email}}",
    "ph": "{{phone}}"
  },
  "custom_data": {
    "currency": "{{currency}}",
    "value": {{value}},
    "order_id": "{{transaction_id}}",
    "contents": {{line_items}}
  }
}

๐Ÿ” Step 5: Match With Pinterest Catalog

  • Ensure product_id matches the product feed ID used in Pinterest Ads
  • This enables dynamic product ads and retargeting

๐Ÿ” Step 6: GDPR Consent Handling

  • Ensure server-side firing occurs only after consent
  • Gate GTM tag triggers using a consent_granted variable

๐Ÿงช Step 7: QA & Debugging

Tool Use
GTM Preview Inspect Web + Server events
Pinterest Events Manager Monitor checkout events in real-time
Dev Tools Console Validate Data Layer and network payloads

Leave a Reply

Your email address will not be published. Required fields are marked *