IF YOU ARE RUNNING AN AD BLOCKER RIGHT NOW YOU WILL HAVE A VERY BAD TIME TRYING TO SET THIS UP! TURN IT OFF BEFORE PROCEEDING DOWN THIS PATH! You’ve been warned.
Google AdSense offers the option to show ads with a size of Google’s choice using the responsive ad size option.
Note that responsive ads are an all-or-nothing option. You can’t limit the height and width of them. They will cause jumpy behaviour when scrolling within a topic.
It is recommended to use fixed size ads instead.
Defining your AdSense ad units
Simply define your ad unit(s) in AdSense using the responsive option:
It can take a few hours before AdSense has any inventory to show in the ad unit, so it’s useful to define some fallback creative in the “If no ads available” field to verify that the ad unit is working and to see which ad sizes AdSense is choosing.
Once you create the ad unit, it will show up in your ad units list with a numbered ID. You’ll need the ID to enter in Discourse.
Discourse Settings
On your Discourse instance, go to Admin > Settings > AdSense. Enter your publisher ID as usual (the number after pub-), enter the ad unit ID in the location(s) where you want it to appear, and choose “responsive” as the size.
A simple like is not enough - this is a massive improvement. Only thing missing is that desktop view ads are not resized if the window is. I have no idea how feasible this is and it is quite an outlier use case. Mobile view scales nicely when the device is rotated 90-degrees.
So great work!
P.S. Server cost whiners - if you have traffic, this can roughly compensate the costs.
Ads that are already rendered won’t be re-sized since we would need to ask the AdSense javascript library to re-fetch the ad (and I don’t remember there being any way to do that). The next time an ad unit is rendered, it should pick up the new view size anyway.
@neil I would need a little hand holding with this.
On mobiles (with full HD screens or better) the responsive setting has started to increasingly show large square banners in the top banner positions. This drops the majority of the content below the fold.
I tried mocking around based on your CSS example but could not nail it. I would like to halve the top banner height, making it a large mobile banner (320x100). How could I achieve that?
Thanks, I’ll give that a try tomorrow or later this week.
Been using the responsive ads for a full year, since my earlier praise in this thread. For some reason the large square ad format has increased popularity as time went by. Originally I got the large mobile banners, but now more squares.
Now I just realized that the code you pasted above was identical to the earlier. The reason I had issues implementing was that for some reason it does not work correctly in the Chrome Inspector / Mobile mode (the ad remains square and topics flood over it), but now when I implemented it again and verified on real devices, the results look as expected.
I’ll ask my community to verify this to get some device diversity.
Update: Well, our community is the best and had already spotted layout breakage. This happens on some Android devices at least.
I can see square ads in Chrome on Android too, and sometimes banner ads. I don’t see it underneath the topic list content though… Which devices are people seeing layout problems?
Also, I don’t see the CSS to control height, which would prevent the square ads.
@neil شكرًا لك مرة أخرى على هذا الإضافة - هذا المكون الواحد هو سمة حاسمة لمجتمعنا الذي يعمل دون أي تمويل آخر.
لقد كنت أشغل إعلانات AdSense مع إعداد الاستجابة منذ أن تم إدخال هذه الميزة إلى الإضافة. ومع ذلك، بدأت إعلانات الاستجابة مؤخرًا في التصرف بشكل خاطئ - يبدو أنني أحصل على وحدات إعلانية أكبر تكسر تجربة المستخدم المقصودة (كثير من محتوى الإعلان فوق الطية). كما أحصل على إعلانات كبيرة جدًا لهاتفي iPhone SE - فهي تنتج مساحة بيضاء كبيرة على الشاشة ما لم أقوم بتدوير الجهاز أفقيًا.
لقد راجعت الإعدادات ولاحظت أن حجم الإعلان أصبح الآن خيارًا متعدد الاختيار. حاولت البحث هنا لكنني لم أتمكن من العثور على معلومات حول كيفية عمل ميزة الاختيار المتعدد هذه فعليًا - ما هي أحجام الإعلانات التي يتم عرضها ومتى إذا اخترت أكثر من واحد؟
إذا اخترت أحجامًا متعددة، ستتبادل وحدات الإعلان بينها بالتساوي. لذا يمكنك، على سبيل المثال، التبديل بين إعلانات اللافتات وإعلانات المربعات في نفس موضع الإعلان.
أما فيما يتعلق بمشاكل ارتفاع الإعلان التي تواجهها، فيمكنك محاولة إضافة قواعد للارتفاع إلى مواقع الإعلانات كما يظهر في المنشور الأول في هذا الموضوع:
بالمناسبة، لم أتمكن مطلقًا من تفعيل التحكم في حجم العنصر المتجاوب. لاحظت للتو أن جوجل أجرت بعض التحديثات على الوحدات المتجاوبة في سبتمبر.
سيكون إضافة الحد الأقصى للارتفاع/العرض إضافة رائعة للإضافة وستجعل خيارات الحجم الثابت زائدة عن الحاجة. ربما يكون هذا شيئًا تستحق مراعاته في خارطة طريق التطوير؟
لا أعرف ما الذي تقترحه، لكنني وجدت هذا المقال الذي يبدو أنه يشير إلى أن الإعلانات المتجاوبة يمكنها الآن تجاهل حاوياتها.
…يمكن الآن لوحات الإعلانات المتجاوبة تغيير حجم حاوية HTML الأب (مثل div) التي تقع ضمنها. وهذا يسمح لها بالتكيف تلقائيًا مع جميع أحجام الإعلانات المختلفة في صفحات الناشرين.
ملاحظة: لكي تعمل لوحات الإعلانات المتجاوبة بشكل صحيح، يجب ألا تُوضع داخل حاوية ذات ارتفاع ثابت أو محدود.
رائع.
إذا كنت ترغب في تحديد ارتفاع إعلاناتك المتجاوبة، فستحتاج إلى تعديل كود الإعلان المتجاوب…
ins class="adsbygoogle" style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
إذن نفعل نفس الشيء الذي كان يعمل سابقًا مع الحاويات وCSS، لكننا نستخدم الأنماط المضمنة بدلاً من ذلك للسماح لـ Google بـ “التكيف تلقائيًا مع جميع أحجام الإعلانات المختلفة” مهما كان ذلك يعني.
لكن أمثلتهم تُظهر أن استخدام CSS لا يزال يعمل: @ljpp انظر هذا المقال:
هل أنت متأكد من أنك لم تجرب استخدام CSS للتحكم في الحد الأقصى للعرض/الارتفاع لوحدات الإعلانات المتجاوبة؟ فالمقالان يتناقضان، لذا ربما تكون أمثلتهم قديمة.
مرحباً، أنشر هذا الموضوع للحصول على بعض التعليقات حول مشكلة متكررة ومزعجة للغاية تتعلق بالإعلانات:
عند استخدام الهاتف المحمول، من الشائع أن “تقفز” المنشورات للأعلى أو للأسفل (لا يوجد وصف أفضل) حتى بعد تحميل كل عناصر الصفحة، مما يجعل قراءة بعض المنشورات صعبة للغاية بسبب هذا التمرير الرأسي غير الإرادي. لا تبقى الشاشة ثابتة عند المنشور، بل تقفز في كل مرة تحاول فيها إعادتها إلى الأمام. أقول إن السبب هو الإعلانات، حيث تختفي المشكلة عند عدم وجودها. لقد قمت بتكوين كل شيء كما يجب، مع إعلانات متجاوبة على Discourse تتوافق مع أكواد إعلانات متجاوبة على Google AdSense.
هل يتعرف أي شخص على هذا السلوك؟
هل يمكن أن يكون مرتبطًا بمحاولة Google AdSense “تحديد” ارتفاع الإعلانات طوال الوقت؟
IF YOU ARE RUNNING AN AD BLOCKER RIGHT NOW YOU WILL HAVE A VERY BAD TIME TRYING TO SET THIS UP! TURN IT OFF BEFORE PROCEEDING DOWN THIS PATH! You’ve been warned.
