🔥 Listen to the post here:
upload icon for date uplaoded
11.22.2023
hashtag icon to indicate category
Best Practices
glasses icon for reading length
8
Minutes

How to Set Up a Pinterest Tag to Fire When a Button is Clicked

A complete, Shopify-compatible, guide to setting up your Pinterest pixel to fire an event when a button is clicked. This is a really useful tool for marketers who are running lead generation campaigns! Disclaimer: You do not need to be a developer nor have any coding experience for this guide, as long as you can follow the steps carefully!
Victor Ricci

Published:

November 22, 2023

How to Set Up a Pinterest Tag to Fire When a Button is Clicked

A complete, Shopify-compatible, guide to setting up your Pinterest pixel to fire an event when a button is clicked. This is a really useful tool for marketers who are running lead generation campaigns! Disclaimer: You do not need to be a developer nor have any coding experience for this guide, as long as you can follow the steps carefully!

🔥 Listen to the post here:

Disclaimer: You do not need to be a developer nor have any coding experience for this guide, as long as you follow the steps carefully!

After combing through (what felt like) the expanse of the entire internet, it turns out that there is no well written guide on how to set up a Pinterest tag to fire only when a button is pressed using simple javascript. So here we are...

The purpose of this is so you can set up something such as a "Lead" event to fire when someone submits a form on your website.

What We'll Do:

  • How to install the Pinterest Base Tag
  • How to leverage the Pinterest x Shopify app for automatic setup
  • How to set up a "Lead" event which fires on button click
  • Simple Javascript
  • Troubleshooting common issues

Pre-requisites

  • A Pinterest Business account with a Pinterest Tag ID
  • A website running HTML & JS
  • Or if you are on Shopify: access to your Shopify page's HTML and JavaScript code

Step 1: Install the Pinterest Base Tag

Important: If you have the Pinterest x Shopify app installed, the base code will be automatically inserted into your pages, so you can skip this step.

Firstly, you'll need to add the Pinterest base tag to the <head> section of your Shopify theme.

Here's the code:

<head>
<!-- Other head elements go here -->

<!-- Start Pinterest Base Tag -->
<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_PIXEL_ID');
    pintrk('page');
  </script>
<noscript>
<img height="1" width="1" style="display:none;" alt=""src="https://ct.pinterest.com/v3/?event=init&tid=YOUR_PIXEL_ID&pd[em]=<hashed_email_address>&noscript=1" />
</noscript>
<!-- End Pinterest Base Tag -->
</head>

Replace YOUR_PIXEL_ID with your Pinterest Tag ID.

Step 2: Find the page you want to update

In Shopify, go to your code editor.

Sales channels → Online Store → Themes → ••• → Edit Code

Navigate to the page that has the button you would like to track, ex: product.liquid.

Step 3: Add Event Tracking Code

Update your HTML button to include an ID:

<input type="submit" name="submit" id="button_track">

The ID is what our JavaScript will look for in order to run. I recommend that you make it something relatively descriptive so if you ever need to go back you will remember why it was set up and what function it holds. In this instance, I chose id="button_track".

Then, add the following JavaScript code to your page. If you are on Shopify, you will likely need to add this code right before the {% schema %} line of your Shopify section.

<script type="text/javascript">
  // Function to handle the button click
  function handleButtonClick() {
    pintrk('track', 'lead');
  }

  // Attach the function to the button click event
  document.addEventListener("DOMContentLoaded", function() {
    const button = document.getElementById('button_track');
    if (button) {
      button.addEventListener("click", handleButtonClick);
    }
  });
</script>

See here:

Final Results!

If you did that all properly, your final code should look something like this for a Shopify section:

<!-- This is our button and form note the id section -->
<div> 
<form>
    <center>
<input type="submit" name="submit" id="button_track" class="btn">
</center>
</form>
</div>

<!-- This is where our script starts -->
<script type="text/javascript">
  // Function to handle the button click
  function handleButtonClick() {
    pintrk('track', 'lead');
  }

  // Attach the function to the button click event
  document.addEventListener("DOMContentLoaded", function() {
    const button = document.getElementById('button_track');
    if (button) {
      button.addEventListener("click", handleButtonClick);
    }
  });
</script>
<!-- This is where our script ends -->

{% schema %}
  {
    "name": "Splash Form",
    "settings": [
    { 
    "type": "text",
    "id": "splash_heading",
    "label": "Form Heading"
    },
    { 
    "type": "text",
    "id": "splash_desc",
    "label": "Form Description"
    },
{% endschema %}

If you're not adding this to Shopify your code would look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Start Pinterest Base Tag -->
<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_PIXEL_ID');
    pintrk('page');
  </script>
<noscript>
<img height="1" width="1" style="display:none;" alt=""src="https://ct.pinterest.com/v3/?event=init&tid=YOUR_PIXEL_ID&pd[em]=<hashed_email_address>&noscript=1" />
</noscript>
<!-- End Pinterest Base Tag -->
</head>
<body>
<!-- This is our button and form note the id section -->
<div> 
<form>
    <center>
<input type="submit" name="submit" id="button_track" class="btn">
</center>
</form>
</div>

<!-- This is where our script starts -->
<script type="text/javascript">
  // Function to handle the button click
  function handleButtonClick() {
    pintrk('track', 'lead');
  }

  // Attach the function to the button click event
  document.addEventListener("DOMContentLoaded", function() {
    const button = document.getElementById('button_track');
    if (button) {
      button.addEventListener("click", handleButtonClick);
    }
  });
</script>
<!-- This is where our script ends -->
</body>
</html>

Check Pinterest

Open your site, click the button, open Pinterest, and confirm your Lead event has fired!

Note that working in an incognito window (command+shift+n) is recommended to make sure you're not being impacted by cache.

Be sure to always refresh your pages and even hard reload them (command+shift+r) when testing.

Troubleshooting

If you encounter issues, here are some steps to troubleshoot:

1. Verify ID is placed on the button

You can inspect the HTML element to ensure that the "button_track" ID is is correctly placed. Right-click on the button →  Inspect

2. Verify Pinterest Pixel is Firing

Use the Pinterest Tag Helper Google Chrome extension to confirm that the pixel fires on the page. The base pixel needs to be present on your page for the button click to properly track.

3. Check Console for Errors

Open your browser's Developer Tools and go to the Console tab. Look for any JavaScript errors that may indicate a problem with the tag setup.

4. Confirm the Button ID

Ensure that the button's ID in your HTML matches the ID specified in your JavaScript code. A mismatch could prevent the event from firing. In our case "button_track"

Alright, if you've made it this far, you've done it. You've cracked the code on setting up a Pinterest "lead" event on your website or Shopify store. From here on out, you'll be gathering data that's actually useful, and not just generic page views. So go ahead, take that overdue sip of coffee, or maybe something stronger.

About the author:

Victor Ricci
CEO
Mattered

Victor Ricci, the distinguished CEO of Mattered, an award-winning digital marketing agency, has solidified his position as an industry leader through a series of successful ventures in the digital arena. He has founded several web companies, including the influencer marketing platform Trend Pie (acquired by X-Mode). He also created Blockify, the #1 ad blocker in the Apple App Store before being acquired in 2022. Ricci's portfolio is not only robust but diverse, with his expertise sought after by a broad range of businesses - from nimble start-ups to global giants like Unilever, Yahoo, and Grubhub.

Profile

up and forward icon to open contact pageup and forward icon to open contact page

Never Miss an Update!

📧 Thanks for joining!
Oops! Something broke :( Please try again