How do I hide Google Ad Manager ads on mobile devices?

I have a <div class="ad-container"> that contains my Google Ad Manager snippet for displaying ad banners, and my CSS has media queries to hide it on smaller devices:

.ad-container {
    display: none;
}

Will that prevent the ad from triggering impressions in Google Ad Manager? Or will the impression be counted (but obviously never get clicked since the user can't see it)?

Otherwise how do I do this correctly to not trigger an impression?

Solution

Hidding a placement container won't prevent adserver calls. Most of the time, Google Ad Manager will try to force the display of the ad to prevent unviewable ads.

In your case, I would use the sizeMapping (see here) to define sizes attached to the banner placement. Here is a sample :

var adSlot = googletag
.defineSlot('/6355419/Travel/Europe', [728, 90], 'banner')
.addService(googletag.pubads());

var mapping = googletag.sizeMapping()
  .addSize([640, 480], [728, 90]) //allow 728x90 ad banner for screens bigger than 639x479px
  .addSize([0, 0], []) //below 639x479px window size, no ad size attached / allowed
  .build();

adSlot.defineSizeMapping(mapping);

Using responsive sizeMapping is the correct way to dispatch size per window size.