How can I effectively set up custom pixels and customer events?

[Chris_Sydney]

Hey there, 

I am looking at deploying custom pixels, and was wondering if anyone has done this and/or set up a scroll 25%/50%/75%/100% with the inbuild customer events. 

I'm looking at the following resource, but its not super clear how to deploy. 

Cheers, 

Chris 

https://shopify.dev/api/pixels/customer-events#collection

https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels

[nadinethery]

Late to the party, but the docs actually mention that it's not possible to have scroll events. 

https://help.shopify.com/en/manual/promoting-marketing/pixels/overview#:~:text=with%20pixels.-,Pixel...

[Chris_Sydney]

Thanks, 

Guess thats the answer, prob just set up an event on the frontend and then push that to customer events.

thanks

[Chris_Sydney · Accepted solution]

I think Ill doc this out incase someone needs this in the future. Effectively Nadine is right below, you can't natively use page scroll in Customer Events / Pixel.

You can do this as followed:

Create a JS file in your assets directory (I called it scroll.js), add an event listener (on load) to fire a event listener (scroll). define the scroll variables (so you don't send the event more than once per page) and then in the function, get the page sizes, scroll depth etc. I also rounded it as im highly unlikely that someone will ever get 50 on the dot. 

then just some if statements firing the custom event to shopify analytics. 

scroll.js

window.addEventListener('load', function(event) {
    window.addEventListener("scroll", scrollHandler);
});

var is25ScrollFired = false;
var is50ScrollFired = false;
var is75ScrollFired = false;
var is100ScrollFired = false;

function scrollHandler() {
    var scrollTop = window.scrollY;
    var scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
    var scrollPercent = scrollTop / scrollHeight;
    var scrollPercentRounded = Math.round(scrollPercent*100);

    if (!is25ScrollFired && scrollPercentRounded > 25 && scrollPercentRounded < 50) {
        Shopify.analytics.publish("pageScroll", {percent: 25});
        is25ScrollFired = true;
    } 
    else if (!is50ScrollFired && scrollPercentRounded >= 50 && scrollPercentRounded < 75) {
        Shopify.analytics.publish("pageScroll", {percent: 50});
        is50ScrollFired = true;
    } 
    else if (!is75ScrollFired && scrollPercentRounded >= 75 && scrollPercentRounded < 100) {
        Shopify.analytics.publish("pageScroll", {percent: 75});
        is75ScrollFired = true;
    } 
    else if (!is100ScrollFired && scrollPercentRounded >= 100) {
        Shopify.analytics.publish("pageScroll", {percent: 100});
        is100ScrollFired = true;
    }
}

Then in your theme.liquid file, you just need to pull the script in so it loads on every page (if you want) 

theme.liquid

<script src="{{ 'scroll.js' | asset_url }}"></script> 

 Then you will be able to capture these events in Customer Events / Custom Pixel by inserting this into your pixel:

analytics.subscribe("pageScroll", (event) => {
  pixel(event);
})

The result of the this event looks like this in the post (if your looking at json)

{"percent":75}

But you are able to trigger the events 

Obviously the benefit of have a single event listener for scroll is good, depends on how you set you pixels up. 

Enjoy ✌️

[Chris_Sydney]

its worth noting that it will be stashed in CustomData if your looking to get that out for say fbq or such.

I have just set up an if statement within the customer event. with the hard code of the values, although i might send the whole message to clean up as FB is detecting it (if I care).

additionally, this wont track scrollup, I have also removed the scroll listener once all are true (to reduce listeners for no reason).