Page Pixel Tracking Tracking | Community
Skip to main content
M
Mr_Moorthi
New Participant
May 19, 2022
Solved

Page Pixel Tracking Tracking

  • May 19, 2022
  • 3 replies
  • 2013 views

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 !!!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Alexis_Cazes_

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

3 replies

yuhuisg
yuhuisg
New Participant
May 20, 2022

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.

    Alexis_Cazes_
    Alexis_Cazes_Accepted solution
    New Participant
    May 20, 2022

    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

    M
    Mr_MoorthiAuthor
    New Participant
    May 27, 2022

    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) {}

    Jennifer_Dungan
    Jennifer_Dungan
    New Participant
    May 19, 2022

    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.

    Terms & ConditionsAccessibility statement

    Loading footer...