Setting a DFP Ad / Creative to Display:None - css

If you set a DFP (Google Ads) ad / creative to display:none so it is invisible. Will it still get impressions? So say I have 31 DFP ads, one is set to display:block and the other 30 are set to display:none.. will each one of the 30 ads that are invisible get a view / impression? And say I set the 30 ads to display:none and then switch them over to display:block when the viewers browser width exceeds 600px... Will the impressions only count until the ads are turned into display:block? Or how would this whole display none with DFP situation work?

As far as I am aware, if you set the adunit to display none the JavaScript is still executed and the ad is still loaded into the page, hence it counts as an impression. I am pretty sure this will be against the Google DFP terms of service and would recommend not taking this approach.

According to the responsive ad unit spec, it is ok to hide them via CSS "display: none;". See "Hiding an ad unit" at the bottom of this page: https://support.google.com/adsense/answer/3543893?hl=en

Related

WooCommer Stripe Plugin does not show input correctly on mobile screen

I use the Stripe checkout plugin on my wordpress site in Woocommerce. Despite some problems with alignment, everything works fine when filling the payment fields when the screen width is greater than a certain amount of pixels (I don't know exactly how much, but above 800px it works - See the first image). The problem happens when I try to complete the purchase on a screen through the browser on a mobile device or even on the desktop simulating a mobile screen in DevTools (Second image).
[Image 1 - Checkout on desktop deviceImage 2 - Checkout on mobile device Chrome Navigator](https://i.stack.imgur.com/wWS3F.png)
At first I suspected that the problem was related to the css style sheet. I managed to change the size of the div using the #stripe-card-element selectors. The result was only that the blank field get bigger. When inspecting the element when everything is correct, the iframe is loaded inside the #stripe-card-element div, but after decreasing the screen, the iframe is no longer loaded, leaving the code snippet like this.
<div id="stripe-card-element" class="wc-stripe-elements-field">
<!-- a Stripe Element will be inserted here. -->
</div>
I've tried updating the plugins I use and looking for a conflict with another plugin, but nothing worked

About Facebook Audience network native ads template height

Will we get paid more if we choose to display a native ad with a higher height (i.e 400) or are all native ads the same and height doesn’t play a factor in how much ecpm you’ll get. If so what would be the point of displaying the bigger native ad when you can show one with small height.
Here’s all the heights for native ads templates:
GenericHeight100
GenericHeight120
GenericHeight300
GenericHeight400
Is it valuable to display a native ad with 400 than then one with 100? Will it increase earnings?

Smooth Scrolling while navigating with 'tab' key

How to force browsers to scroll pages smoothly to the focused element while navigating with 'tab' key?
Note: I've looked this up but haven't found the solution yet.
As this as marked as accessibility the simple answer is don't.
You may not like that the page jumps about but you have to consider the opposite side effect of changing scrolling behaviour.
What if your user is partially sighted and has the zoom set to 300% on your page. A tabble item such as a link may be many many pixels off screen when zoom levels are so high, having to wait for it to scroll into view will only be frustrating.
Additionally for WCAG 2.1 (applies to level AA I think) guidelines you should avoid animation of any kind or have the option for users to switch it off, you are adding a lot of extra work in needing a setting to remove this scrolling directly within your site. This is because certain cognitive impairments make animations far more jarring and distracting than a simple jump and also that is expected behaviour - changing expected behaviour can also lead to disorientation for people with cognitive impairements.
Another thing to consider is that to achieve this you would have to intercept the tab key - this is a terrible idea as screen readers rely heavily on this key in different scenarios (tabbing in a list of items tabs down to the next item in some screen readers, intercepting the tab key would result in unexpected behaviour.)
Don't worry about it, disabled and able bodied users will thank you for leaving the tab key well alone (as I hate when people slow my scroll speed)
If you did want to do this you would intercept the keypress of the tab key and manually cycle to the next tabbable element - but please don't do it!!
You would also (for accessibility and WCAG 2.1) have to then add an option to remove this functionality within the site accessibility settings (if you have them).
Smooth scrolling is a browser setting (chrome > about:flags, firefox > about:preferences, ie > tools>options>advanced). You might be able to change the browser's setting programmatically, but that would seem like a security risk that browsers would block. It's a personal setting. Some users like it and some don't. If you forced it upon a user that didn't like it, that would not be nice.

Adsense flexibility for holy grail fluid layout?

This is my situation, I have a css 3 column fluid layout (finally mastered the holy grail, thanks everyone!) and in my left column I have a google adsense advert. For those of you familiar with this, they aren't very flexible in the advert sizes, but I am curious if there is a way to change the advert based on the width of the column. Currently this column sits at 20%, so I am thinking maybe a good old fashioned "If - Else" statement might do the trick, but I haven't got it to work yet. The logic is that say we have two ads, a 180 px wide one (a) and a 280 px wide one (b), so if the column is greater than 280 px then it will display advert b, if not then it will display advert a. Has anyone else done this? Thanks!
There are a few considerations here. First, you tagged this question with css. If you simply want to use css to hide the ad your logic has determined should not be displayed, it's trivial to do so, but this is a terrible idea. For one, you'll be hiding a loaded ad, which Google specifically forbids. Next, you might end up hiding an ad that has loaded first, and therefore has the most "valuable" clicks on your page. You don't want to be left showing your less valuable ads.
What you need to do is use javascript at page load to determine what the viewport width is, and then choose which ad code to load in the ad slot you are talking about. Test this in as many browsers as possible, because you need to make sure you getting the correct viewport width for this strategy to work. If, for some reason, it doesn't work, make sure that the fallback doesn't collapse the layout catastrophically. The downside to this method is that if the user changes viewport size after the page load, then the ad will break boundaries. You can at least use CSS to mitigate this edge case scenario, either hiding or cropping the ad's parent div (overflow: hidden;) so that a change of viewport size doesn't break the layout.

Iframe Auto-Resize

Dear FB Developer Team,
we have an issue with the FB.Canvas.setAutoResize() function of the app iframe.
The frame extends vertically to the height of the first request, but on subsequent requests to pages with a lower height, the iframe doesn't resize vertically.
While we tried the FB.Canvas.setAutoResize() function, it seems not to work.
Could we somehow solve this issue?
Would be great to receive an answer here.
Best,
Max
This is a known Facebook issue, they're renaming setAutoResize to setAutoGrow for exactly this reason.
When your page shrinks in size you should use FB.Canvas.setSize to lower the height https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/
There have been several bugs reported about how
FB.Canvas.setAutoResize doesn’t set the height of the iframe correctly
in some scenarios. We have been trying to fix this and and have pushed
various fixes to ensure that it works correctly for the case when the
iframe grows in height. We however came to the conclusion that it is
hard for us to do this accurately when the iframe shrinks in height.
As a result we are renaming this function to FB.Canvas.setAutoGrow so
that it accurately reflects its functionality. If your iframe is
shrinking for whatever reason we recommend that you use
FB.Canvas.setSize with a height parameter to set the iframe height
explicitly.
As part of this change, you should be able to use
FB.Canvas.setAutoGrow today. FB.Canvas.setAutoResize will work for the
next 90 days and we will remove support for this method on January
1st, 2012. Here is some sample code to test the grow functionality.
https://developers.facebook.com/blog/post/565/

Resources