skip to Main Content

HTML Code

<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled">

I have checked : https://www.w3schools.com/js/js_htmldom_elements.asp and tried but it not help.

I want to take this element data-ad-status="unfilled" from HTML using javascript. So, i can use it in if else statement.

Like

if (data-ad-status="unfilled") {
some fuctions; 
}

3

Answers


  1. /*SELECTING BY CLASSANEMES*/
    const withClassName = document.querySelectorAll(".adsbygoogle");
    withClassName.forEach(ad => {
      if ((ad.getAttribute("data-ad-status")) === "unfilled") {
        console.log("unfilled ad element")
      } else {
        console.log("other ad element")
      };
    })
    <div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled"></div>
    <div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="somethingelse"></div>

    document.querySelector("[data-ad-status='unfilled'] this one is electing particular one with data-ad-status="unfillded"

    • document.querySelectorAll("[data-ad-status]"); this one is selecting all with the data-ad-status attribute.
    const myDiv = document.querySelector("[data-ad-status='unfilled']");
    
    const selectAllWithAttributeAdStatus = document.querySelectorAll("[data-ad-status]");
    /*This(selectAllWithAttributeAdStatus) one is just for showing how to select elements with data-ad-status attribute */
    //let adStatus = myDiv.getAttribute("data-ad-status");
    selectAllWithAttributeAdStatus.forEach(ad => {
      if ((ad.getAttribute("data-ad-status")) === "unfilled") {
        console.log("unfilled ad element")
      } else {
        console.log("other ad element")
      };
    })
    <div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled"></div>
    <div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="somethingelse"></div>
    Login or Signup to reply.
  2. we can use document.querySelector to select our element (if there is only one)

    but in this case we need to use querySelectorAll for selecting all the ads elements in html (<ins>)

    also now we can loop your logic on every element with that status, using forEach

    with forEach you can get 3 other information,

    – the element itself (which you can do your logic with, or console.log it)

    – the index of the element

    – the array of all the elements


    with this order (element, indexOfElement, ArrayOfAllElements)

    this is a example:

    let unfilledAds = document.querySelectorAll(`.adsbygoogle[data-ad-status="unfilled"]`);
    let successAds = document.querySelectorAll(`.adsbygoogle[data-ad-status="success"]`);;
    
    /* not success */
    unfilledAds.forEach((adElement) => {
        /* your logic */
        console.log(`❌ this Ad is not filled`, adElement);
    });
    
    /* success */
    successAds.forEach((adElement) => {
        console.log(`✅ this ad is visible to the user`, adElement);
    });
    <!-- fail -->
        <ins data-ad-status="unfilled" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>
        <ins data-ad-status="unfilled" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>
    
        <!-- success -->
        <ins data-ad-status="success" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>
        <ins data-ad-status="success" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>

    you can also generalize [data-ad-status] by selecting all the elements and then do a simple if, else (checking the result)

    you can also use this custom google event for the ads https://developers.google.com/publisher-tag/samples/ad-event-listeners without reinventing the wheels
    so it will work if the ads will be successful after some time.

    just see the docs.

    here a example: https://googleads.github.io/google-publisher-tag-samples/advanced/ad-event-listeners/demo.html

    Login or Signup to reply.
    • As you told me that data is coming from async way I have added setTimeOut() function to wait for around 2 seconds here.
    • I do not have access to how data is coming so this time for 2s is hard coded. change it’s value and try to run it. and I am sure it will solve your problem.
    • But use asyn-await function and make selectAd() wait till you data get loaded.
    const selecteAd = () => {
      const myDiv = document.querySelector("[data-ad-status='unfilled']");
      const selectAllWithAttributeAdStatus = document.querySelectorAll("[data-ad-status]");
      /*This(selectAllWithAttributeAdStatus) one is just for showing how to select elements with data-ad-status attribute */
      //let adStatus = myDiv.getAttribute("data-ad-status");
      selectAllWithAttributeAdStatus.forEach(ad => {
        if ((ad.getAttribute("data-ad-status")) === "unfilled") {
          ad.style.background = "red";
          ad.style.height = "100px";
          ad.style.width = "100px";
          ad.style.display = "inline-block";
        } else {
          ad.style.background = "green";
          ad.style.height = "100px";
          ad.style.width = "100px";
          ad.style.display = "inline-block";
        };
      })
    }
    const myTimeout = setTimeout(selecteAd, 2000);
    <div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled"></div>
    <div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="somethingelse"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search