Expand my Community achievements bar.

Join us for the Adobe Journey Optimizer Community Q&A Coffee Break on 28th February at 8 am PT with Ariel Sultan, Daniel Wright, Josee Haeley and Rohit Basuri.
SOLVED

custom code to fire event on element visibility

Avatar

Level 6

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

View solution in original post

5 Replies

Avatar

Level 4

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';
    }
}

 

 

Avatar

Correct answer by
Community Advisor

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

Avatar

Moderator

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

Avatar

Level 4

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

Avatar

Moderator

Following up here to see if you have resolved this.