📝This is an advanced guide that requires basic knowledge of Javascript, HTML, Shopify liquid, and the Theme editor.
You will need to ensure that the "base code" (Javascript snippet) from each platform (Facebook, Google, Pinterest, Snapchat, etc.) is included in the source code of your page(s) in order to track "event(s) code" added to the page(s). Use our available <Scripts> section to add additional script/pixel code to your ZP pages as needed.
If "base code" from a tracking platform has already been included in the theme.liquid file on your store, then that code will only be included automatically on your Zipify Pages that use the "Theme Header/Footer" feature. For pages that don't, you can add the "base code" via the <Scripts> feature in Zipify Pages or if it's Liquid code, to the page.zipifypages.liquid file which is the default page template file for Zipify Pages.
📝 If you're using either the native Shopify Facebook Pixel integration and/or native Shopify Google Analytics integrations (Online Store > Preferences of Shopify admin), then the "base code" for those platforms will already be included in your ZP pages.
Buttons (non-Buy Boxes):
Single button
You can add custom events for each button element on the page. You need to find the CSS selector for your specific button element on the page.
Add your own CSS selector, specify the event title and parameters for your event.
Note: This script will work only for one selected button element, i.e. for the button shown in the video, not for all buttons on the page.
This is a common script to fire a Facebook "Custom event" when a button is clicked:
<script type="text/javascript">
document.querySelector( 'a[role="button"][data-id="1035116"]' ).addEventListener("click",function() { // Add your selector instead of a[role="button"][data-id="1035116"]
fbq('track', 'Custom event', { // Enter your event title
content_ids: ['1234'], // Enter you custom parameters
content_type: 'product',
value: 2.99,
currency: 'USD'
});
});
</script>
Multiple buttons
Follow the information below to fire the same event for multiple/all of the buttons on the page using one script:
1. The arrayId variable contains an array with button IDs (it's just an example which illustrates the principle, so you'll need to replace the example IDs with real ones):
2. Here you can add an event the buttons need to react on (example contains "click" event):
The resulting example script looks like this:
var arrayId = ['10921', '10744', '10747'];arrayId.forEach(id => { document.querySelector('[data-id="' + id +'"]').addEventListener('click', function() {});});Example script using the arrayID variable to fire a Facebook 'Custom event' when a button is clicked:
<script>
var arrayId = ['10921', '10744', '10747'];
arrayId.forEach(id => {
document.querySelector('[data-id="' + id +'"]').addEventListener('click', function() {
fbq('track', 'Custom event', { // Enter your event title
content_ids: ['1234'], // Enter you custom parameters
content_type: 'product',
value: 2.99,
currency: 'USD'
});
});
});
</script>
Buttons (Buy Boxes):
Example 1 (Single Product Buy Boxes):
Here is an example of a script which will fire the Pinterest "addtocart" event when a single product Buy Box button that is set for "Cart - Add to cart and load cart page" is clicked on your ZP page:
<script>
var arrayId = ['button[data-zp-link-type="cart"]'];
arrayId.forEach(function(id) {
var btn = document.querySelector(id);
if(btn) {
btn.addEventListener('click', function() {
pintrk('track', 'addtocart');
});
}
});
</script>
If your Buy Box button uses the "Cart - Add to cart and stay on the same page" option then you will need to use a different value in the script. Where "cart" is shown in the script above, use "cart_current_page" instead.
If your Buy Box button uses the "Cart - Add to cart and direct customer to a specific URL" option, where "cart" is shown in the script above, use "cart_external" instead.
Example 2 (Single Product Buy Boxes):
Here is an example of a script which will fire the Facebook "InitiateCheckout" event when a single product Buy Box button that has the destination "Checkout" set for it is clicked on your ZP page:
<script>
var arrayId = ['button[data-zp-link-type="checkout"]'];
arrayId.forEach(function(id) {
var btn = document.querySelector(id);
if(btn) {
btn.addEventListener('click', function() {
fbq('track', 'InitiateCheckout');
});
}
});
</script>
Note: The Buy Box button destination needs to be set to "Checkout" to fire the event code above correctly.
Example 3 (Single Product Buy Boxes):
Here is an example of a script which will fire a Custom Google Analytics event for a single product Buy Box button that has "Cart - Add to cart and load cart page" Destination:
<script>
var arrayId = ['button[data-zp-link-type="cart"]'];
arrayId.forEach(function(id) {
var btn = document.querySelector(id);
if(btn) {
btn.addEventListener('click', function() {
ga('send', 'event', [Event Category], [Event Action], [Event Label], [Event Value]);
});
}
});
</script>
Create your GA custom event using the following syntax:
Example 4 (Multiple Product Buy Boxes):
Here is an example of a script which will fire the Pinterest "addtocart" event for a multi-product Buy Box block such as the Best Value Offer block(s):
<script>
function triggerPintrk(event) {
var target = event.target;
if(event.isTrusted) {
event.preventDefault();
pintrk("track", "addtocart");
setTimeout(function() {
target.click();
}, 0);
}
}
var elements = document.querySelectorAll('[data-id="12345678"] button[data-zp-link-type="cart_external"]');
Array.prototype.forEach.call(elements, function(element) {
element && element.addEventListener("click", triggerPintrk);
});
</script>
Notes:
The data-id number in the script is specific to the Buy Box block being used on a particular page. So, you will need to find the block ID using the Inspect option in your web browser. Here is a short video showing the steps.
The cart_external part of the script needs to be updated to match the actual Destination you've set for your Buy Box buttons.
"cart" = Cart - Add to Cart and load the Cart page
"cart_current_page" = Cart - Add to Cart and stay on the same page
"cart_external" = Cart - Add to Cart and direct customer to a specific URL
"checkout" = Checkout
"external" = URL
Example 5 (Multiple Product Buy Boxes):
Here is an example of a script which will fire the Snapchat "ADD_CART" event for a multi-product Buy Box block such as the Best Value Offer block(s):
<script>
function triggerSnaptr(event) {
var target = event.target;
if(event.isTrusted) {
event.preventDefault();
snaptr("track","ADD_CART");
setTimeout(function() {
target.click();
}, 0);
}
}
var elements = document.querySelectorAll('[data-id="12345678"] button[data-zp-link-type="external"]');
Array.prototype.forEach.call(elements, function(element) {
element && element.addEventListener("click", triggerSnaptr);
});
</script>
Note: Just like for the Pinterest example in 3) above, update the data-id number and link type (cart, checkout, external, etc) in the script to work with your particular Zipify Page.
The scripts above should be added to the Scripts > Footer section of the page as a local script (particular to that page).
Alternatively, if it's a single-product Buy Box script which doesn't need the data-id number from a particular Buy Box block to work, you can add the script as a Global script through Settings > Global Scripts > Page Scripts if you need the script included on all or a majority of your ZP pages:
Images:
For images you should use the selector div[data-id="1041356"], you can get the specific data-id for the image on your page as shown here:
Example of a common script to fire a Facebook "Custom event" when an image is clicked:
<script type="text/javascript">
document.querySelector( 'div[data-id="1041356"]' ).addEventListener("click",function() { // Add your selector instead of div[data-id="1041356"]
fbq('track', 'Custom event', { // Enter your event title
content_ids: ['1234'], // Enter you custom parameters
content_type: 'product',
value: 2.99,
currency: 'USD'
});
});
</script>
CRM lightbox optin / on-page optin form "submit" button click:
Add a script to fire an event once the submit button is clicked for the CRM lightbox popup optin or on-page optin form. Just add a script like this into the page's Scripts > Footer section:
<script>
window.ZipifyPages.on('crmsignupsuccess', function(sendParams) {
[desired action] (ex: tracking action initiation)
})
</script>
Example of standard Facebook Lead event:
<script>
window.ZipifyPages.on('crmsignupsuccess', function(params){
fbq('track', 'Lead');
})
</script>
To check it go to your browser's DevTools (Inspect) > Network > activate Preserve Log.
After that you need to open the page, interact with it (optin via the lightbox popup form) and in the Network tab, filter by a word 'Lead' or an event that is written there:
