BigCommerce and Pinterest Tag

Step 1: Base code

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

  2. Check the box next to “Google Analytics” ​and click Save​

  3. Click Google Analytics ​at the top of the screen

  4. Paste the following code in the Tracking Code box; if there is already code in this box, paste the code after it:

    <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>
    
    

     

  5. Replace “YOUR_TAG_ID”​ with your own unique tag ID

  6. To find this, navigate to Ads Manager and click on Ads​, then find Conversion Tracking​ and click Generate Pinterest Tag

  7. Navigate to your conversion tracking overview and find the details section

  8. Copy the 13 digit number below “Unique Tag ID” and paste it in place of “YOUR_TAG_ID” in the code

  9. Click Save in the top left of your Squarespace Code Injection page

Step 2: Checkout code

  1. From your BigCommerce admin, click Advanced Settings​ and then click Affiliate Conversion Tracking

  2. Paste the following code in the Conversion Tracking Code​ box; if there is already code in this box, paste your tracking code after it:

    <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>

     

  3. Remember to replace “YOUR_TAG_ID”​ with the unique tag ID that was generated in Ads Manager

  4. Save​ your changes

Step 3: Addtocart Code

  1. From your BigCommerce admin, click Storefront​ then select Edit Theme Files​. If you can’t find the theme editor or get confused, 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 is has a “.html” file type suffix

  4. Once in the “addtocart.html” file, find the code for addtocart 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 anytime 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 savings the file, navigate back to the custom theme you just edited

  10. Click the three dot button and select Apply

Still need help?
Contact us