通过引荐访问网站来隐藏“ AdSense” div”

Question

I'm really a newbie to everything around programming ok. So...

I want to hide an AdSense div when accessing from a specific source (for example: ?utm_source=www.test.com) for the time a user is still moving around on my site or 120 seconds after that.

PS: I'm in a partnership with another advertising company and I have to show their ads when visitors come through this referral.

I have an AdSense code:

<div class="td-all-devices">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Test -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-0000000000000"
     data-ad-slot="000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

I tried this, but AdSense keep showing in footer :

function getQueryVariable(variable)
{ 
  var query = window.location.search.substring(1); 
  var vars = query.split("&"); 
  for (var i=0;i<vars.length;i++)
  { 
    var pair = vars[i].split("="); 
    if (pair[0] == variable)
    { 
      return pair[1]; 
    } 
  }
  return -1; //not found 
}

if ( getQueryVariable('utm_source') == 'www.test.com' )
{
    im.getAds(pozice);
    var ads = 1;

    document.getElementsByClassName("td-all-devices").style.display = 'none';
}

else 
{
    var ads = 0;
}

Can anyone help?

Answer 1

In here:

if ( getQueryVariable('utm_source') == 'www.test.com' )
{
    im.getAds(pozice);
    var ads = 1;
    document.getElementsByClassName("td-all-devices").style.display = 'none';
}

document.getElementsByClassName returns an array of objects. Therefore you need to iterate through it to change the value of something in it. Well, you don't HAVE TO ITERATE through it... as long as you can specify which index of the collection you want to play with.

Something like this:

if ( getQueryVariable('utm_source') == 'www.test.com' )
{
    im.getAds(pozice);
    var ads = 1;
    var theElements = document.getElementsByClassName("td-all-devices");
    for(var i = 0; i < theElements.length; i++)
    {
    theElements[i].style.display = 'none';
    }
}

else 
{
    var ads = 0;
}

document.getElementById() returns 1 element you could have modified using this document.getElementById("whatever unique id").style.display = 'none';

document.getElement s ByClassName() returns a collection of element s you could have modified like this document.getElementsByClassName("whatever class name")[index position].style.display = 'none';

Since you are a self proclaimed newbie, I will invite you to discover the many Developer tools your preferred browser likely has to offer you. Most browsers have a console you can look at. The console will help you tremendously in troubleshooting your code. In console, you would have picked your problem almost instantly because you would have seen an entry like this:

TypeError: document.getElementsByClassName(...).style is undefined

In Firefox, with unmodified keyboard shortcuts, you can bring up the developers palette using ctrl + shift + s .