How to use responsive ad tag parameters. Mobile and Desktop

responsive ad tag parameters mobile, desktop

[anthonyinit]

Hello all,
I'm not professional with designing or CSS, coding but right now I'm having an issue with my ads. I'm using banner ads on my website 300x600 all ads responsive on desktop however when I view on a mobile device it is not perfectly responsive.

Can someone help me how to fix this

Thank you so much

[not2easy]

If these are Google's AdSense ads you don't control their appearance with css. If the site is responsive without ads and the ads are not resizing, make sure you have allowed the Mediapartners bots to access your css files.

[anthonyinit]

Thank you for your reply,
I'm not using google ads. site is responsive without ads but with ads, it is not resizing. I'm not sure about Mediapartners bots can you please give me more details if possible.

[not2easy]

Mediapartners bots are Google's bots for AdSense ads. If you are not using AdSense then there is no reason to be concerned about them. So the banner ads are banners that you place on your site, not being added by a third party script? If so you only need to treat the images as you do your other images. You can place the images within containers and ensure that your css gives images a max-width of 100%.

Maybe I am not understanding the situation because I don't know quite what is meant by

ad tag parameters

if you are placing your own banners.

[anthonyinit]

Hello,
Maybe I'm not being clear. I'm not using google ads but I'm using other ads network ads not my personal banners.

They provided me with ads code and I place them on my website and everything works fine on desktop but on mobile devices ads are not in a position.

https://ibb.co/JxX0smT
https://ibb.co/Nm7xXHZ

1st image is from desktop view and then 2nd from a mobile device. marked in red are the actual size of my webpage and the ads showing outside.

[not2easy]

Third party ads whether from Google or other ad networks are controlled on their delivery network. You might find an answer from that ad network but we can only work with actual code in this forum, sorry.

If you can copy the surrounding code from where your ads are shown and the relevant css then possibly we can assist. But we can't investigate third party resources to ensure that they are compliant with css standards. That is between you and their network. They may have proprietary ad tag parameters.

[anthonyinit]

You are right...

They gave me a new code:

 <div class="landscape_ad_pos" style="margin-bottom: 20px;"></div>
<script>
 (function() {
 var adPos = document.getElementsByClassName('landscape_ad_pos');
 var mobile_ad_id = "id_12345ABC"; // 320x50
 var desktop_ad_id = "id_23456BCD"; // 970x250
 var ad_id = window.innerWidth <= 480 ? mobile_ad_id : desktop_ad_id;
 for (var i = 0; i < adPos.length; i++) {
 adPos[i].innerHTML = '<div class="adsbyvli" data-ad-slot="' + ad_id + '"></div>';
 }
 (vitag.displayInit = window.vitag.displayInit || []).push(function () {
 viAPItag.display(ad_id);
 });
 }())
</script>

But the only issue for me is that I need to add this script including 'echo'

this is the place i need to add this code with 'echo'

<?php
// On form submission...
if ($validFormSubmission)
{
// Print "please wait" message and preview image
echo '<div id="preview" style="display:block"><h2><i class="fa fa-cog fa-spin"></i> '.Wait_Message.'</h2>';
echo '<p><img src="'.$vidInfo['thumb_preview'].'" alt="preview image" style="width:160px" onerror="this.src=\'https://img.youtube.com/vi/oops/1.jpg\';" /></p>';
echo '<p dir="ltr"><b>'.$vidInfo['title'].'</b></p>';
echo '<h4 style="margin-bottom:15px;text-transform:uppercase;"><span class="label label-default">'.$converter->GetConvertedFileType().'</span></h4>';
echo '<div dir="ltr" id="progress-bar"><div id="progress_container"><div id="progress">0%</div></div></div>';
echo '</div><script type="text/javascript">$("#cancel_convert_button span").click(stopConversion).tooltip({placement:"bottom"});</script>';
-------------------------This is the place where I should add the code-------------------------------------

I'm not sure how to insert the code with echo'

they said you should revise echo "include...."; I'm not sure what they mean by that.

Thank you

[edited by: not2easy at 3:30 pm (utc) on Jun 14, 2020]
[edit reason] anonymized acct ids [/edit]

[not2easy]

OK, it looks like they want you to create a 'page' for the javascript and add it where you want the ads using a <?php include.
If you have not used php includes on your site(s) before, that is a way to add code by including an external file inline so it would be loaded before the page is viewed. javascript is a post-processor script and php is a pre-processor script, meaning that php is executed before a page is viewed and javascript is only executed after a page is loaded. It is often used to create sidebar content or footer content in html that is added to a page as it loads so there is only one file to be updated when there are changes to make, rather than editing every page to update a footer change, for example.

Some hosts might require a 'handler' in order to execute php includes as html, so you can try it ,and if it isn't working as expected, ask your host about using php includes.

[anthonyinit]

Found a solution Sir,

I created a php file and add the code in there and call that php file where I want it to call from.

With this

echo include_once (dirname(__FILE__) . '/ads.php');

This is exactly what you are saying if I'm not mistaken.

Everything looks fine now both Desktop and Mobile responsive. Already asked my ad manager to check and see if i'm not breaking any guidelines and she confirmed that everything looks fine :)

Another great learning for me and i thank you so much for your support as well

[not2easy]

Good to hear it is all resolved.

[NickMNS]

What the code from your ad-network does is: show a 320 x 50 ad unit if the screen width is less than 480 and when the screen is greater than 480 it shows 970 x 250 ad unit.
My question is, are the ad units themselves responsive, in that the 320x50 will expand to say 375 on an iphone X? And more importantly will the 970x250 get narrower on any device between 480 and 970. If the ad units are static you may have problem in both cases, but likely a more serious issue in 480 case.

A bigger issue still is that this code is executed once at page load, so if a user is looking at their phone (any phone other than an i-phone4) in landscape mode, the script will load the 970x250 ad-unit, covering nearly the entire screen, and then breaking the layout completely once the phone is turned. The breaking of layout will occur whether or not the units are themselves responsive.

What seems abundantly clear is that the ad-network you are working with does not have handle on this, IMO that should be a warning flag.

As for the echo issue, just add a new line:

echo '<script> ..... everything between the script tags ....</script>'

one caveat: I don't code in PHP, so you may need to escape some characters, but I didn't see anything that jumps out at me.

[anthonyinit]

Thank you for your explanation...

I did try adding another echo ' but that didn't help their new code and my website got an error. website crashed.

Adding echo' to original "single" ad code works just fine however adding it to the new code which includes Desktop and Mobile code needs a bit of work to the code and i don't know how to edit PHP cuz I'm not a coder.

Anyways everything is working fine now but I need to look out for what you mentioned earlier.