Pictures and Adsense Auto Ads Not Displaying on mobile AMP pages in reader mode

Hi Habib,

Sorry to hear you’ve been encountering trouble with ads and images, and thank you for the mention.

We’ve performed some checks on your site and we can see ads on all the AMP URLs we’ve checked (example).

While I don’t see any unusual behavior with ads or images at present have you considered selecting a different AMP compatible theme in reader mode as opposed to the legacy reader theme. Alternatively switching to an fully AMP compatible theme in transitional or standard mode can mean you have widget areas available, with more placement opportunity for ads (example). In the legacy reader mode theme you only have a standard content area available.

If you’re finding ads or images not appearing on any particular URL I’d be happy to check this if you wan to share the URL. Alternatively I can check your site setup if you’d like to share your Site Health information using our user submission form.

Hello Mr. James
Thank you very much for your quick response.. It made me very happy.

I saw the example I attached of the ads in action, and it’s true
But I meant from the question that it does not work when browsing from the mobile device only, and I think that the animated image that I attached to me as an example is from the desktop and not from the phone .. If I am not mistaken .. Isn’t it?
Ads and images work fine for me on the AMP version of the desktop.

The second thing…
I have filled out the form for the site health, and sent it to you, you can look into it.

The third thing:
You had asked me if I had considered choosing a different AMP-compatible theme in Reader mode instead of the old one.
Do I understand from what you said that the Jannah template I’m using is not fully compatible with the AMP version in reader mode.
I think I upgraded from the old reader version to the new one, after I read this article for you one day
https://amp-wp.org/amp-plugin-reader-mode-2-0-time-to-upgrade/

I’d like to switch to standard mode so that my site is fully AMP compatible, but I don’t know how to do that very well, What is your advice to me? should I install a different theme than Jannah, for example..

Fourth and final thing:
I tried over and over to add a search box next to the hamburger menu.. and I read a lot of articles from you and others about it.. but I didn’t succeed in any of them.. I guess the theme I’m using doesn’t support it.

Conclusion ..
One affirmation I would like to know from you.. which is important at this moment.
Do you see images and ads for AMP pages when you open them with a mobile phone, and does the hamburger menu work as well..

I sincerely apologize for the length of the post.

Hi there @habeebcom,

You’re correct that I used a desktop emulator to check for ads. I now also checked your site on mobile and indeed I do see ads on the URL I checked.

The second thing…
I have filled out the form for the site health, and sent it to you, you can look into it.

Many thanks for sharing. From looking at the details all looks good, I don’t see any issues with your setup. I also checked your site on mobile and the navigation menu is working in AMP at present – while in reader mode.

I’d like to switch to standard mode so that my site is fully AMP compatible, but I don’t know how to do that very well, What is your advice to me? should I install a different theme than Jannah, for example..

Great! If you’d looking to increase your AMP coverage you do have more options when using transitional mode, as you can server all content types as AMP. Having said that in the post you referenced this mentions how to use AMP with one of the AMP compatible themes while using reader mode. You’re using the legacy theme. Have you tried installing and then selecting any of the AMP Compatible themes while remaining in reader mode? That’s a good way to test out another theme. It looks like you’ve already put in some great work to your existing Jannah theme so maybe you don’t wish to change from reader mode. You can select a different theme in reader mode if you do wish to check and compare different AMP compatible themes.

I’d like to switch to standard mode so that my site is fully AMP compatible, but I don’t know how to do that very well, What is your advice to me? should I install a different theme than Jannah, for example..

While I don’t think the Jannah theme is fully supported in standard mode you can use any of the AMP compatible themes in reader mode. If you like how it works and looks in reader mode you could then switch to transitional or standard mode using that theme. It would take some testing of course, so you could do this on a staging site or locally.

I tried over and over to add a search box next to the hamburger menu.. and I read a lot of articles from you and others about it.. but I didn’t succeed in any of them.. I guess the theme I’m using doesn’t support it.

If you’re trying to get the Jannah themes navigation menu working in AMP as it does in the canonical (non AMP) version this may take some work, as the Jannah theme I believe works primarily in reader mode and doesn’t support transitional or standard. I’m happy to take a look for you if this is the case, if you’re sure you wish to use transitional mode.

I sincerely apologize for the length of the post.

Not a problem at all, that’s what we’re here for! Let me know if you want me to take a deeper look at your Jannah setup in relation to using the same theme in transitional or standard mode.

Hello Mr James..
You are a really great and wonderful man..

I deeply apologize for the delay in responding to you.. this was beyond my control.
I would like to tell you first that the main problem has been solved..
You were right, the ads and pictures were working fine almost everywhere, except in my own country, and I don’t understand why.

When you told me in the first reply that the ads are working… I thought of communicating with some friends in other countries such as Saudi Arabia, Egypt, Malaysia and Turkey… and it became clear to me that the problem was only in my country.

Second order:
Conclusion
If you’re using the legacy Reader mode at present try out one of the compatible themes and see how it fits your site. It could bring you one step closer towards a Standard mode AMP site.

I have copied this short summary from one of your important articles to which I referred in my previous post.
https://amp-wp.org/amp-plugin-reader-mode-2-0-time-to-upgrade/
It totally applies to me.
I already tried to go one step further, and went to this link..
https://amp-wp.org/ecosystem/
I looked at many template there…
But I was afraid that these templates are not compatible with the Arabic language, in which my site works, and at the same time I do not have enough experience .. I am an amateur .. but I am not a professional developer.

Third command:
Really, as you said.. I did a lot of work inside Jannah template in order for AMP pages to work in the way you see.. but I was unable to find a solution to make a search bar, although I read many things for you, and tried to implement them like this, for example:

https://gist.github.com/jamesozzie/36401c2f62feabb770c63aab6314dc55
And this too
https://gist.github.com/jamesozzie/430555b1b7c539e8d98b7c660a8dc707

With all this work, I am not satisfied with the way the AMP pages on my site look.
Therefore (and in answer to your question) yes, I would like you to take a look a deeper look at the Jannah template for my website, and telling me your opinion.

Conclusion with two questions:
The first question: Do you think there is a possibility to upgrade from the old reader mode to the new reader mode After v2.0 onwards, through the Jannah template that I am currently using.

second question:
If the answer to the first question is no, can you point me to a paid or unpaid template that fully supports the AMP project, and supports an easy transition from reader mode to transitional mode and then standard, and most of all (supports Arabic) in which my site works .
I am willing to buy such a template.

I apologize once again if my questions are long, and I also thank you for your patience.. and the speed of your response..

Hi there @habeebcom,

Nice troubleshooting, and interesting that ads were not appearing from your country. I’m aware that AMP cache and AMP resources such as component files are restricted in some regions unfortunately, for reasons outside of our control.

But I was afraid that these templates are not compatible with the Arabic language, in which my site works

Some popular themes such as Astra (resource), Go and OceanPress I believe have RTL support.

I will also take a look at the Jannah theme during the week and see what I can determine, before letting you know here if it’s a difficult task to make the navigation menu AMP compatible.

Conclusion with two questions:
The first question: Do you think there is a possibility to upgrade from the old reader mode to the new reader mode After v2.0 onwards, through the Jannah template that I am currently using.

That would be a question for the Jannah theme developers I’m afraid. I believe they have their own AMP templates and provide support for single content types only based on a recent comment on their theme page.

second question:
If the answer to the first question is no, can you point me to a paid or unpaid template that fully supports the AMP project, and supports an easy transition from reader mode to transitional mode and then standard, and most of all (supports Arabic) in which my site works .
I am willing to buy such a template.

Along with the themes suggested above and the core themes have you tried the GeneratePress theme (RTL reference) with their AMP add on, or the Kadence theme (RTL mention)? There may be more themes that provide full RTL and Arabic language support listed on the plugin website ecosystem.

I’ll also report back to you here once I have another look at your site. It may be possible for me to provide a quick fix the sidebar navigation menu with your existing theme. Please allow me a couple of days in order to do so.

Hello Mister James..
Thanks again for your quick response..
Ok, I will take a look at the templates you mentioned, and I will try one of them..

(That would be a question for Jannah’s theme developers, I’m afraid. I guess they have their own AMP templates and only provide support for individual content types based on a recent comment on their themes page)

Yes.. I understood what you mean.. I should have asked the developers of Jannah already,.. but since I had a bit bad experience with this template during the past three years.. I didn’t want to renew the subscription to their paid support.. and I started thinking about switching template..

Well we agreing, I will look at the templates you suggested to me, until you take another look at the site and the Jannah template.

Thank you very much.. Bye

Hi there @habeebcom,

I have the steps below which can help you use your Jannah theme in transitional or standard mode. It won’t be your themes native navigation menu and it looks like the logo used the picture element, which isn’t supported in AMP. This however will be addressed once the below has been shipped:
https://github.com/ampproject/amp-wp/issues/6676

In order to get a working navigation menu on your RTL screen please follow the steps below and inform me how you get on:

1. Install and activate this plugin
2. In your Jannah child theme add the following CSS tweeks (Appearance > Customizer > Additional CSS)

   .jzsidebar_container   {
     padding-top:12px !important}
   .jzsidebar_container svg {
     transform: scale(0.5) !important;}
    
   html[amp] .tie-icon-navicon{
   	display:none !important
   }

3. Navigate to “Appearance > Menus” and tick the option to display your menu in the AMP sidemenu menu position (AMP sidebar menu)
4. Next you’ll need to add the <?php echo do_shortcode('[jz-sidebar]'); ?> snippet to your child themes header.php file, right below the existing themes hamburger menu. I’ve made a code snippet of how it should look.

After performing the above visit the AMP version of your site after switching to transitional mode. Let me know once you’ve performed the above and I can also check your site`

Hello Mister James..
Sorry, I didn’t see your reply until today
I will try to apply the steps you mentioned and I will let you know the result later.

Noticeable:
I noticed this today that everything is working fine on AMP pages.. on my mobile device the menu works – ads – as well as images..
Did you perform a specific procedure .. or any repairs that led to these results?
Or is it just a coincidence?
Sometimes things happen suddenly, and we don’t know why they happened?

Anyway.. as I told you, I will try to do the steps you mentioned, because I am really eager to go to the transitional mode and then the standard.. so that my site becomes completely AMP.. and works according to the principle “phone first”..
Thank you very much again

Hi @habeebcom,

My name is Fellyph, I will answer you when James is out, next week he is back. AMP plugin didn’t get any upgrade recently, it means the ads issue could be solved on the ads side.

One suggestion is testing the theme in a local installation before test in production, you can use Local and import the data from your website and check how the themes suggested by James perform with Arabic language.

Related to the previous steps with James’ suggestions, if you have any question please let me know.

Hi Fellyph..
Thank you very much ..

I apologize for the delay in responding.. I have been busy for the past few days
I’ll try the steps James recommended as soon as possible, and then I’ll get back to you.

Thank you very much again

Hello Mr. James
Hello Mr. fellyph
I would like to tell you at the beginning that I had already downloaded this plugin earlier about 6 months ago, I am a good follower of your articles, at least about a year ago, but I faced the same problem that happened to me today, when I tried to apply the steps you mentioned to me .

The problem was as follows:
First: Immediately after installing the plug-in, this message appears at the top of the screen for the non-AMP version.
No menu assigned!
Please assign your menu to the “AMP sidebar” menu location
I attached a picture of the problem here

Second: When I try to set the menu from Customize the template refuses to save changes, and I don’t understand why?
Attached is a picture of the problem

Third: Despite this problem, I continued the steps and copied the code to the header.php file in the child’s folder, and prepared the site for transitional mode .. but it did not seem to me that anything had changed ..
Things remain as they are in the reader’s situation

I have also attached the complete code for you in the header.php . file
If you could help me put the snippet to the right place inside the file, then send it back to me I would be very grateful..
This is the link to the full code

Thank you very much for the thousandth time for your generosity.

Hi there @habeebcom,

Thanks for the update, and sorry to hear you’ve been unable to setup the alternative amp-sidebar component using the suggested plugin.

Second: When I try to set the menu from Customize the template refuses to save changes, and I don’t understand why?

If you’re unable to save the menu I can’t be sure of the cause. This isn’t something that would be caused by the AMP plugin. Is it just for this particular menu or are you able to save other menus?

I have also attached the complete code for you in the header.php . file

I’ll need to check this with your theme after revisiting the themes files. I’ll get back to you on this tomorrow. In the meantime can you confirm you’re able to make save menu changes via the customizers or by the “Appearance > Menus” settings.

Hello Mr. James

Is it just for this particular menu or are you able to save other menus?

In response to your this question… No, it is not only for this list, and I can save other lists as well… But does your question mean that I had to make a separate and customized list?

Today I also made another attempt from the customization menu with live preview and the result was as you see in the attached picture
https://allnaturalfood.net/wp-content/uploads/2022/01/3333.jpg

Also I tried to do a new scan of the site through the AMP plugin and I turned off the incompatible plugins..
Then I tried to run the transitional version, but every time I try to save the changes.. it takes me back to the Continental version and says that it advises me to use the reader mode because of problems with the template.
Although he had told me after scanning that my site is ready to use AMP completely, as you can see in the attached picture..
https://allnaturalfood.net/wp-content/uploads/2022/01/444444.jpg

Anyway.. I became very embarrassed by you, as I took a lot of your time.. and I sincerely apologize to you..
You are a nice and wonderful person, and your chest is wide and welcoming.. and words are unable to thank you..

So I will try to manage this and solve this problem at a later time, or I will buy a new template..it will give me better support..
Because, in my opinion, the root of the problem is the template.

Thank you very much again for your generosity.

Hi @habeebcom, Thanks for your patience.

No, it is not only for this list, and I can save other lists as well… But does your question mean that I had to make a separate and customized list?

As long as you can save navigation menus please ensure you apply the same menu to the “AMP Sidebar Menu position”, the same menu you have applied to your primary Jannah theme menu. You don’t need to create a new menu.

Also I tried to do a new scan of the site through the AMP plugin and I turned off the incompatible plugins..

The file which you need to edit is in fact not the header.php file as I previously referenced, apologies for that. It’s the /templates/header/components.php file, which contains the themes navigation menu markup. You can add the <?php echo do_shortcode(‘[jz-sidebar]’); ?> snippet below the existing navigation menu. Please add as per this code snippet.

So I will try to manage this and solve this problem at a later time, or I will buy a new template..it will give me better support..

Choosing an already AMP compatible theme can be much easier than making programmatic changes. Regardless feel free to open a support topic on the respective support forum for the AMP sidebar navigation menu if you’re looking to get that working with the Jannah theme.

I’ll also close this support topic as you’re using a theme that features it’s own AMP templates and features for transitional mode, independent of the AMP plugin. Thank you and best of luck with the development of your site.

Good morning Mr. James
Good day

We are in agreement now.. and if I urgently need you at a later time, I will contact you or one of the support team in the forum

Thank you very much
Bye