Adding Custom js code to page load rule | Community
Skip to main content
Y
yabagna
Level 2
October 16, 2015
Solved

Adding Custom js code to page load rule

  • October 16, 2015
  • 3 replies
  • 2331 views

Hi I'm trying to set a page load rule to only fire when a div is been displayed so i tried using this custom code: 

if($(".av_hidden-content").css('display') == "none"){return false;}

But the rule does not fire and I get this from the console

(){return"none"==$(".av_hidden-content").css("display")?!0:!1} for rule "Redd's Apple Ale: AV test" not met.

Would you please let me know if i'm doing this right? or if I need to change something in my script?

:) thank you!

    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 i8sand

    AllDayDev wrote...

    Hi, Yabagna.

    You are trying to have the rule fire when a div with the class "av_hidden-content" is visible?

    If so, I recommend you simplify your script a bit. You do not need the if statement/block, nor do you need the shorthand ?true:false bit. Just wrap a statement that you want to be true in parentheses.
    Assuming you have jQuery loaded and available on your page, you could use something like:

    1. ($(".av_hidden-content").css("display") != "none")

    If not using jQuery, then plain JS would be something like:

     
    1. (document.getElementsByClassName("av_hidden-content")[0].style.display != "none")

     

    Note that, if you are instead trying to fire the rule when the div is actually being viewed, then you might instead consider using an event-based rule with the 'enters viewport' event type.

     

    I did something similar with Event Based Rules. Because our devs change class names and IDs without much notice, we decided to use HTML data attributes for consistency (read: untouched by anyone other than folks on the analytics team) in our tracking names. For example, we used our CMS to include an attribute called data-lead-confirmed on any screen displaying a confirmation message whenever a lead form is completed. We then use an EBR with a Condition>Event Type=Element Exists>Element Tag or Selector=*[data-lead-confirmed] to pull the value of the data attribute, assign it to a prop or evar. We track this EBR as an event as well. The nice thing about this set up is that, using our CMS, we can post multiple data attributes alongside this [data-lead-confirmed] attribute and pull the value of each of those additional attributes and assign them to props or evars as well. 

    3 replies

    Y
    yabagnaAuthor
    Level 2
    October 16, 2015

    I also tried setting it like this but it did not work either :(

    ($(".av_hidden-content").css('display') == "none")? true : false;

    A
    Anonymous
    October 16, 2015

    Hi, Yabagna.

    You are trying to have the rule fire when a div with the class "av_hidden-content" is visible?

    If so, I recommend you simplify your script a bit. You do not need the if statement/block, nor do you need the shorthand ?true:false bit. Just wrap a statement that you want to be true in parentheses.
    Assuming you have jQuery loaded and available on your page, you could use something like:

    ($(".av_hidden-content").css("display") != "none")

    If not using jQuery, then plain JS would be something like:

    (document.getElementsByClassName("av_hidden-content")[0].style.display != "none")

     

    Note that, if you are instead trying to fire the rule when the div is actually being viewed, then you might instead consider using an event-based rule with the 'enters viewport' event type.

      i8sand
      i8sandAccepted solution
      Level 2
      October 16, 2015

      AllDayDev wrote...

      Hi, Yabagna.

      You are trying to have the rule fire when a div with the class "av_hidden-content" is visible?

      If so, I recommend you simplify your script a bit. You do not need the if statement/block, nor do you need the shorthand ?true:false bit. Just wrap a statement that you want to be true in parentheses.
      Assuming you have jQuery loaded and available on your page, you could use something like:

      1. ($(".av_hidden-content").css("display") != "none")

      If not using jQuery, then plain JS would be something like:

       
      1. (document.getElementsByClassName("av_hidden-content")[0].style.display != "none")

       

      Note that, if you are instead trying to fire the rule when the div is actually being viewed, then you might instead consider using an event-based rule with the 'enters viewport' event type.

       

      I did something similar with Event Based Rules. Because our devs change class names and IDs without much notice, we decided to use HTML data attributes for consistency (read: untouched by anyone other than folks on the analytics team) in our tracking names. For example, we used our CMS to include an attribute called data-lead-confirmed on any screen displaying a confirmation message whenever a lead form is completed. We then use an EBR with a Condition>Event Type=Element Exists>Element Tag or Selector=*[data-lead-confirmed] to pull the value of the data attribute, assign it to a prop or evar. We track this EBR as an event as well. The nice thing about this set up is that, using our CMS, we can post multiple data attributes alongside this [data-lead-confirmed] attribute and pull the value of each of those additional attributes and assign them to props or evars as well. 

      Terms & ConditionsAccessibility statement

      Loading footer...