BigCommerce and Pinterest Tag

It looks like you're viewing this from a region that Pinterest Tag isn't available in yet. See where Pinterest Tag is available to Pinterest Business accounts.

Learn more

BigCommerce is a platform you can use to create an online store. By connecting your BigCommerce store with your Pinterest tag, you can find out how much Pinterest influences traffic to your store and sales of your products.

 

Step 1: Base code

The base code allows you to gather data on events, like someone buying a product or adding a product to their shopping basket.

  1. From your BigCommerce admin, click Storefront and then Script Manager
  2. Click Create a Script
  3. Fill out the form with the following info:
    • Enter Pinterest Base Code as the Name of script
    • Enter Pinterest tracking tag as the Description
    • Select Head for Location on page
    • Select All pages for Select pages where script will be added
    • Select Targeting; Advertizing for Script category
    • Select Script for Script type
  4. Paste the code below into the Tracking Code box, making sure you replace YOUR_TAG_ID with your own tag ID
  5. To find your tag ID, open Ads Manager on Pinterest, click Ads, then Conversions and click Create Pinterest Tag
  6. Copy the 13 digit number below Your Unique Tag ID and paste it in place of YOUR_TAG_ID in the Tracking Code box
  7. Click Save
<script type="text/javascript">

!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', { em: '%%GLOBAL_BillingEmail%%', });

pintrk('page');

</script>

<noscript>

<img height="1" width="1" style="display:none;" alt=""

src="https://ct.pinterest.com/v3/?tid=YOUR_TAG_ID&noscript=1" />

</noscript>

 

 Step 2: Checkout code

When a product is checked out or bought, this is an event. The checkout code means you can track people who complete transactions.

  1. From your BigCommerce admin, click Advanced Settings and then Web Analytics

  2. Click the box for Affiliate Conversion Tracking if it isn’t already clicked and then click the Affiliate Conversion Tracking tab

  3. Paste the following code in the Conversion Tracking Code box making sure you replace YOUR_TAG_ID with your own tag ID; if there is already code in this box, paste your tracking code after it

  4. Save your changes

<script type="text/javascript">

!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', { em: '%%GLOBAL_BillingEmail%%', });

pintrk('page');

</script>

<noscript>

<img height="1" width="1" style="display:none;" alt=""

src="https://ct.pinterest.com/v3/?tid=YOUR_TAG_ID&noscript=1" />

</noscript>



<script>

pintrk('track', 'checkout',{

value: %%ORDER_AMOUNT%%,

order_quantity:1,

order_id: %%ORDER_ID%%

});

</script>

<noscript>

<img height="1" width="1" style="display:none;" alt=""

src="https://ct.pinterest.com/v3/?tid=YOUR_TAG_ID&event=checkout&noscript=1"/>

</noscript>

 

 

Step 3: Add-to-cart Code

When a product is added to a cart, this is an event. The add-to-cart code means you can track people who add products to their shopping baskets.

  1. From your BigCommerce admin, click Storefront and then click Customize. Once Store Design opens, click Edit Theme Files on the left. If you need more information, see this BigCommerce help article
  2. After opening the editor, find the products template code files: An example path is Templates > Components > Products
  3. Locate the file called addtocart.html and confirm that the file has an .html file type suffix
  4. Once in the addtocart.html file, find the code for add-to-cart submit button. On Google Chrome, navigate to your own site and right click on the button then select Inspect. This can help you confirm the right code for the button. You’ll know you’ve found the right code when the element is an <input> tag, the id= of the element is form-action-addToCart, and the data-wait-message (a message that will be displayed after the button is clicked) is Adding to Cart
  5. Once you’ve found the code snippet for the button, copy a unique part of it

  6. Go back to the BigCommerce editor and use command + f on Mac or control + f on PC to search the page and find the specific code within the file

  7. Paste the following code after <input so that the add-to-cart event tag fires any time someone adds a product to their cart

    onclick="pintrk('track', 'addtocart', {value:{{product.price.without_tax.value}}, order_quantity: 1});"

     

  8. Click Save File at the bottom of the editor

  9. After saving the file, navigate back to the custom theme you just edited

  10. Click the ellipsis icon and select Apply

Still need help?
Contact us