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

Page Pixel Tracking Tracking

  • May 19, 2022
  • 3 replies
  • 2018 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

Jennifer_Dungan
Community Advisor and Adobe Champion
Jennifer_DunganCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
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.

Alexis_Cazes_
Alexis_Cazes_Accepted solution
Level 10
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
Level 2
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) {}

yuhuisg
Community Advisor
yuhuisgCommunity Advisor
Community Advisor
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.

    Terms & ConditionsAccessibility statement

    Loading footer...