I was asked why content upgrades didn’t work, and I wondered if the content was being read and if the reader made it to the bottom of the blog post to see the upgrade. Is your content being read? How can you tell?

Scenario:

You have the blog post written, and you just KNOW it’s going to resonate, but how do you know if the content is being consumed? I had a client complain that her content upgrade wasn’t working so I asked her “Are they reading your content and seeing the upgrade?”

The question is, are they reading it all the way to the middle or bottom where your content upgrade is located? I mean, how can you tell if they have even read that far?

We can use an html element and fire the pixel when it loads on the page. Watch the video below then grab the code.

MY Trigger – I left this here to see if you’re reading my conent:

Scroll Page until the custom event is fired

Custom event will fire when this phrase enters the screen

*IMPORTANT NOTE

Your base pixel code must be installed for this to work. Your base pixel code should be installed on your website so that it fires on every page. This tutorial assumes that you have installed it and are ready to go.

If you are using ClickFunnels, you can add the code to your page inside of the tracking code setting under header. To learn how to install your pixel in ClickFunnels, click here: http://lynne-miller.com/sales-funnels/how-to-install-the-facebook-pixel-on-clickfunnels-the-right-way/

---

Here is the code that you will need to put into your website. I use Elementor so I just add a code module. What makes this work is the h1 id so I've highlighted everything in bold below that you will need to change:

If you choose to use a different HTML element, just add id="fb-fire-pixel" to it as seen below.

<h1>Scroll Page until the custom event is fired</h1>
<div></div>
<h1 id="fb-fire-pixel">Custom event will fire when this phrase enters the screen</h1>

<script>
var executeWhenElementIsVisible = function(dom_element, callback) {

if (!(dom_element instanceof HTMLElement)) {
console.error('dom_element must be a valid HTMLElement');
}

if (typeof callback !== 'function') {
console.error(
'Second parameter must be a function, got',
typeof callback,
'instead',
);
}

function isOnViewport(elem) {
var rect = elem.getBoundingClientRect();
var docElem = document.documentElement;
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || docElem.clientHeight) &&
rect.right <= (window.innerWidth || docElem.clientWidth)
);
}

var executeCallback = (function() {
var wasExecuted = false;
return function() {
if (!wasExecuted && isOnViewport(dom_element)) {
wasExecuted = true;
callback();
}
};
})();

window.addEventListener('scroll', executeCallback, false);
};

var element = document.getElementById('fb-fire-pixel');

executeWhenElementIsVisible(element, function() {
fbq('track', 'ViewContent');
});

</script>

And that's it! That's how you fire the Facebook™ pixel once they've scrolled your page.