How to Set Up a Pinterest Tag to Fire When a Button is Clicked
#
Pinterest
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!
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>
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.
