The plugin only inserts the codes you configure. Whatever visible you insert it will shift the layout.
Basically, to prevent layout shift you need to define block height:
https://adinserter.pro/faq/how-to-minimize-layout-shift
I have tried to define block height but unfortunately the single thing that a block height is defined causes a big layout shift. I’m using client side insertion because I want to insert my AdSense Ads later on. Is there no way to stop the CLS for that option?
Greetings
If the block code (at least the wrapping div) is inserted serverside and the block height is defined, then the layout will not shift.
Remote debugging doesn’t seem to be enabled.
Which block is shifting the layout?
Oh my God, I don’t know what you mean. I set in the settings dynamic blocks to client side insertion. Than I activated Client side device detection and defined under the tab display a height. At the moment I’m testing block 2.
I want to configure it for my AdSense Ads and block referrers like facebook later on.
I have activated remote debugging.
Greetings
Block 1 has no height defined.
Block 2 uses server-side and client-side device detection.
For client-side detection all devices are enabled.
Use only one device detection method (usually client-side should be used) and enable only wanted devices. If you need to insert on all devices then you don’t need device detection – disable it.
https://adinserter.pro/documentation/device-detection
Ok. I have changed my settings to:
Dynamic Blocks –> server side
Device Detection –> client-side insert for block 1, devices phone, tablet
device detection –> none for block 2, because this one should appear on all devices –> but in which form the ad is added when nothing is chosen? Show or insert? For Adsense only insert is allowed, I read. Would it be better to define an extra block for desktop, because here I have an add with defined height and width.
height defined in all blocks: 300 pixel
referrers blocked: facebook, flipboard
The CLS seems to be gone 🙂
Greetings
When you are not using client-side device detection the insertion method for non-static code defines Dynamic blocks setting:
https://adinserter.pro/documentation/plugin-settings#dynamic-blocks
Yes, you can use a separate block for desktop or use only one with this approach:
https://adinserter.pro/documentation/device-detection#viewport-separators
Me again, thank you very much for your help!
I have made an own block for the desktop ad now, so my configuration is now as follows:
Dynamic Blocks –> server side
Device Detection –> client-side insert for block 1, desktop
device detection –> client-side insert for block 2, tablet, mobile
device detection -> client-side insert for block 3, tablet, mobile
blocked referrers: *facebook.com, *flipboard.com
Now I was trying to set a cookie in block 4:
var hours = 1;
var date = new Date();
date.setTime(date.getTime() + (hours * 60 * 60 * 1000));
document.cookie = 'ai-hide-ads=1; expires=' + date.toUTCString () + "; path=/";
–> insertion footer
–> no wrapping
In the blocks 1 to 3 I set the URL-Parameter to: ai-hide-ads. I tried if it works in an incognito tab. If I come from Facebook I don’t see any ads. I also don’t see any ads if I click on a link. If I come to my page from Google I see the ad, but when I click on a link, I don’t see any ad on the new loaded page too. Am doing something wrong?
Greetings Kathrin
PS: I rated your app!!
Update: I was testing it on mobile and on desktop with the incognito tab. When I go directly to my page, I see the advertisement in the first post, but when clicking on an intern link the next page hasn’t any advertisement. But the advertisement should only be not inserted for users from facebook and flipboard. Why the advertisement is limited when going directly to the page or coming from Google?
Greetings Kathrin
Dynamic Blocks should be set to client-side insert.
I don’t see Javascript code in the footer.
It seems the footer code is not enabled.
Yesterday you told me to set the dynamic blocks to server side to avoid cls. If I use client side insert the cls is really huge. Too much for Google.
Where I should enable the footer code? I did everything that was written in the description 🙁
Greetings Kathrin
No, misunderstanding.
If the block code (at least the wrapping div) is inserted serverside and the block height is defined, then the layout will not shift.
You still need to use client-side insertion for dynamic blocks (dynamic content – based on the rererrer). The basic code for the block is almost always inserted serverside. I only wanted to point out where the layout shift comes from.
You need to click on the button top right next to PHP to enable insertion of the header / footer code:
https://adinserter.pro/documentation/header-and-footer-code
I have wrote you an Email with screenshots, I don’t know what to do anymore. And I don’t know how to insert the wrapping div server side 🙁
Greetings Kathrin
Great, they will be able to offer direct help.
If I leave the dynamic blocks on client side insert I get really high CLS thats no option 🙁 I put it back to server-side. Is that a problem for AdSense?
And how I get the AMP Ads to work? Would it be a problem to put the AdSense AMP Code directly in my theme that supports AMP or am I forced to do it with AdInserter?
Greetings Kathrin
