• Resolved topfgartenwelt

    (@topfgartenwelt)


    At the moment I’m trying the free plugin, but it seems that AdInserter is causing a CLS in the desktop version. Lighthouse is reporting that the following peace of code is the problem:

    div.code-block.code-block-2

    How can I avoid it? Without the plugin my CLS is nearly 0.

    I have tried to set a height in custom css (350 pixel) –> CLS
    I have tried a banner –> CLS after insertion

    Greetings Kathrin

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 35 total)
  • Plugin Author Spacetime

    (@spacetime)

    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

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    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

    Plugin Author Spacetime

    (@spacetime)

    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?

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    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

    Plugin Author Spacetime

    (@spacetime)

    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

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    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

    Plugin Author Spacetime

    (@spacetime)

    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

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    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!!

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    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

    Plugin Author Spacetime

    (@spacetime)

    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.

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    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

    Plugin Author Spacetime

    (@spacetime)

    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

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    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

    Plugin Author Spacetime

    (@spacetime)

    Great, they will be able to offer direct help.

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    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

Viewing 15 replies - 1 through 15 (of 35 total)
  • The topic ‘CLS’ is closed to new replies.