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)
- Tag Type: Custom HTML
- 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
- Trigger:
event_name
equalscheckout
- 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 |