*Important!
You will need to ensure that the "base code" 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" to the page.zipifypages.liquid file which is the default page template file for Zipify Pages.

Note: 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.

Video: https://www.screencast.com/t/JQNwOi0avlCF

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:

Here is an example of a script which will fire the Pinterest "addtocart" event when a Buy Box button that is set for "Cart - Add to cart and stay on the same page" is clicked on your ZP page:

<script>
var arrayId = ['button[data-zp-link-type="cart"]', 'button[data-zp-link-type="cart_current_page"]'];
arrayId.forEach(function(id) {    
var btn = document.querySelector(id);
if(btn)  {
btn.addEventListener('click', function() {
pintrk('track', 'addtocart');
});
}
});
</script>

Note: The Buy Box button needs to be set to "Cart - Add to Cart and stay on the same page" to fire the event code above correctly. 

If your Buy Box button uses the "Cart - Add to cart and load cart page" option then you will need to use a different value in the script. Where "cart_current_page" is shown in the script above, use "cart" instead.

If your Buy Box button uses the "Cart - Add to cart and direct customer to a specific URL" option, where  "cart_current_page" is shown in the script above, use "cart_external" instead.

Example 2:

Here is an example of a script which will fire the Facebook "InitiateCheckout" event when a 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. 

The scripts above should be added to the Scripts > Footer section of the page. Alternatively, 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:

Did this answer your question?