Page Pixel Tracking Tracking

[Mr_Moorthi]

Hi Team ,

There is certain requirement customer wanted track pixel. If user scroll tracking to fire every 1000 pixels .

Please let us know how can we achive this . I have implemented JS code its printing console log but i dont see my rule is firing .

JS code :

window.onscroll = function() {myFunction()};
function myFunction() {
if (document.documentElement.scrollTop % 1000 == 0) {
console.log(document.documentElement.scrollTop);
}
}

Thanks in Advance !!!

[Jennifer_Dungan]

I suppose there would be two ways to go about this... 

1. Set up one rule that triggers on the page load, with the JS if statement set up the way you have it, but add your custom Pixel code where the console.log is... this means that the Rule will only trigger once on page load, but the pixel should still fire each time the user scrolls up or down the page when it meets the criteria. Since this is technically an ongoing listener (i.e. window.onscroll), this should work just fine.

2. The other option (and I suspect this is what you are trying to do) is to use this as the actual code to trigger the rule. If so, then you need to add a "trigger();" where the console.log is...

In custom code triggers, the "trigger();" function is what tells Adobe to run the rule.

[Alexis_Cazes_ · Accepted solution]

1. Never use window.onevent, the reasons behind it, is that if using this method it will overwrite any code already defined for this event.

2. Use window.addEventListener instead as you can add one or more event listener for same one

3. To fire a rule, it needs to have event configured as direct call rule and you need to call in your custom code _satellite.track('directCallRuleId')

I have done a similar exercise where we needed to send analytics call when customer scrolled to specific section of page

1. Create page load rule at PAGE TOP
2. In action select custom code and enter code similar to following:

function initScrollingDetails() {
    window.scrolling: {
        "to25": false,
        "to50": false,
        "to75": false,
        "to100": false
    };
}

function updateScrollingDetails() {
    try {
        var scrollTop = window.scrollY;
        var docHeight = document.body.offsetHeight;
        var winHeight = window.innerHeight;
        var scrollPercent = scrollTop / (docHeight - winHeight);
        var scrollPercentRounded = Math.round(scrollPercent * 100);
        var updated = [];
        if (scrollPercentRounded <= 25 && !scrolling.to25) {
            updated.push(25);
            scrolling.to25 = true;
        }
        if (scrollPercentRounded > 25 && scrollPercentRounded <= 50 && !scrolling.to50) {
            updated.push(50);
            scrolling.to50 = true;
        }
        if (scrollPercentRounded > 50 && scrollPercentRounded <= 75 && !scrolling.to75) {
            updated.push(75);
            scrolling.to75 = true;
        }
        if (scrollPercentRounded > 75 && scrollPercentRounded <= 100 && !scrolling.to100) {
            updated.push(100);
            scrolling.to100 = true;
        }

        //we only want to send an anlytics call if scrolling has been updated        
        if (updated.length > 0) {
            _satellite.track('scrollingUpdate', updated)
        }
    } catch (e) {
        _satellite.logger.error('Failed while updating scolling errors', e);
    }
}
try {
    initScrollingDetails();
    updateScrollingDetails();
    window.addEventListener("scroll", updateScrollingDetails);
} catch (e) {
    _satellite.logger.error('Failed while tracking scrolling', e);
}

Now each time user reaches specific percentage then fire the DCR scrollingUpdate

hope this helps

[Mr_Moorthi]

Hi Alexis_Cazes_ ,

Solution got works fine with small changes Thanks !!!

_satellite._scrollTracker = {
callback: function() {
try {
var _sT = _satellite._scrollTracker,
h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight',
p = 0,
pv = false;
this.percent = this.percent || {};
p = Math.round((h[st] || b[st]));
pv = (p >= 1000) && !this.percent[1000] && 1000 || pv;

if (pv) {
this.percent[pv] = true;
_sT.percent = pv;
_satellite.track('pagescroll_percent_hit');
window.clearInterval(_satellite._scrollTracker.interval);
console.log('testing 1000 pixel');
}

} catch (e) {}
}
};
try {
_satellite._scrollTracker.interval = window.setInterval(_satellite._scrollTracker.callback, 0);
} catch (e) {}

[yuhuisg]

Not answering your question directly. Instead, I'm curious about the requirement "If user scroll tracking to fire every 1000 pixels".

1000 pixels is very specific… and could even be meaningless too. A person who scrolls 1000 pixels on a desktop screen could see much different content compared to another person who scrolls 1000 pixels on a smartphone screen.