custom code to fire event on element visibility

[aagk123]

I am trying to set an event on element visibility using custom code. For example when a page load and there is a targeted element and on page load the custom code should set the event. The challenge here is I have event "direct call" for page load and in that page load, I may or may not have that element. But when I have that element I should add the event to the page view.

[franzli]

If I understood your request, you would like to have an optional 'element visible' event attached to the page view call.

Meaning, if the event is triggered, send it as an event in the page view call and if it isn't, don't send the event.

If that's the case, on your page load rule, you can have a rule component with custom code:

var targetElement = document.querySelector('.your-element-class');
if (targetElement && getComputedStyle(targetElement).display === 'block') {
    // Element is visible as display is 'block', set the Adobe Analytics event
    s.events = s.apl(s.events, "event123", ",", 2);
}

You can use the Append to List plugin in your appMeasurement:

/******************************************* BEGIN CODE TO DEPLOY *******************************************/
/* Adobe Consulting Plugin: apl (appendToList) v4.0 */
function apl(lv,va,d1,d2,cc){var b=lv,d=va,e=d1,c=d2,g=cc;if("-v"===b)return{plugin:"apl",version:"4.0"};var h=function(){if("undefined"!==typeof window.s_c_il)for(var k=0,b;k<window.s_c_il.length;k++)if(b=window.s_c_il[k],b._c&&"s_c"===b._c)return b}();"undefined"!==typeof h&&(h.contextData.apl="4.0");window.inList=window.inList||function(b,d,c,e){if("string"!==typeof d)return!1;if("string"===typeof b)b=b.split(c||",");else if("object"!==typeof b)return!1;c=0;for(a=b.length;c<a;c++)if(1==e&&d===b[c]||d.toLowerCase()===b[c].toLowerCase())return!0;return!1};if(!b||"string"===typeof b){if("string"!==typeof d||""===d)return b;e=e||",";c=c||e;1==c&&(c=e,g||(g=1));2==c&&1!=g&&(c=e);d=d.split(",");h=d.length;for(var f=0;f<h;f++)window.inList(b,d[f],e,g)||(b=b?b+c+d[f]:d[f])}return b};
/******************************************** END CODE TO DEPLOY ********************************************/

If you don't want to use apl,

var targetElement = document.querySelector('.your-element-class');
if (targetElement && getComputedStyle(targetElement).display === 'block') {
    // Element is visible as display is 'block', set the Adobe Analytics event
    if (s.events) {
        s.events += ',event123';
    } else {
        s.events = 'event123';
    }
}

[yuhuisg · Accepted solution]

Instead of using custom code, try the Core extension's "Enters Viewport" event to see if that works for you.

[Rudi-Shumpert]

I came here to say this.  Use the "Enters Viewport". much, much cleaner. 

[franzli]

oh yeah, slipped my mind with "Enters Viewport" That option is probably the best since it has a lot of options as well.

[Rudi-Shumpert]

Following up here to see if you have resolved this.