Media Queries

[GregChapman]

Mmm! I don't think I understand the full situation here.

Are you talking about a different forum or a different place in the forum where the adverts are to appear? I say this because your earlier post included a similar script with the lines:

 /* Leaderboard */
                    google_ad_slot = "9529659947";
                    google_ad_width = 728;
                    google_ad_height = 90;
                    google_page_url = "<n.current_url/>";

In both cases there's an initial comment line, then what I assume is a line that is Google's reference to the adverts to be inserted or your account with them, then the size for the advert is specified and finally a NAML reference which will produce the forum's address. All of these data items, I'm sure, will be used by the JavaScript code (a .js file) in the following script, which you see is hosted on Google's servers.

The point is that the earlier script will insert large ads and the new one will insert small ads, but neither by itself will change the advert size depending on size of the screen/window of the device showing the page. Whereas the Google code you posted will - and I understood that that is what you want to achieve.

So before I give a step-by-step guide on how to edit the the macro that is my best guess on what will work to dynamically change the size of the advert depending on the device/window size used by your site's visitor, I would need to know what the number represents in the line:
google_ad_slot = "9529659947";
or maybe just leave you to guess what the appropriate number is, given there are several in your examples.

[Harvey]

Greg,

Every ad in your google adsense account has a specific number.  The commented out /*Leaderboard*/ is for the humans to know what ad they are looking when dealing with the code.  The ad_slot actually tells google which ad to place in the spot.  I am trying to figure out some kind of if/then statement that that pulls the 728 x 90 unless the screen width is less than say 1000px. In that case it would pull a different ad_slot that is a 320 x 100.

Does this help?

On Mon, Nov 14, 2016 at 5:52 AM, GregChapman [via Nabble Support] <[hidden email]> wrote:

Mmm! I don't think I understand the full situation here.

Are you talking about a different forum or a different place in the forum where the adverts are to appear? I say this because your earlier post included a similar script with the lines:

 /* Leaderboard */
                    google_ad_slot = "<a href="tel:[phone]" value="[phone]" target="_blank">9529659947";
                    google_ad_width = 728;
                    google_ad_height = 90;
                    google_page_url = "<n.current_url/>";

In both cases there's an initial comment line, then what I assume is a line that is Google's reference to the adverts to be inserted or your account with them, then the size for the advert is specified and finally a NAML reference which will produce the forum's address. All of these data items, I'm sure, will be used by the JavaScript code (a .js file) in the following script, which you see is hosted on Google's servers.

The point is that the earlier script will insert large ads and the new one will insert small ads, but neither by itself will change the advert size depending on size of the screen/window of the device showing the page. Whereas the Google code you posted will - and I understood that that is what you want to achieve.

So before I give a step-by-step guide on how to edit the the macro that is my best guess on what will work to dynamically change the size of the advert depending on the device/window size used by your site's visitor, I would need to know what the number represents in the line:
google_ad_slot = "<a href="tel:[phone]" value="[phone]" target="_blank">9529659947";
or maybe just leave you to guess what the appropriate number is, given there are several in your examples.

---

If you reply to this email, your message will be added to the discussion below:

http://support.nabble.com/Media-Queries-tp7597404p7597517.html

To unsubscribe from Media Queries, click here.
NAML

--

[GregChapman]

Harvey wrote

Every ad in your google adsense account has a specific number.

In which case I guess that line in the format is a "seed number" and the JavaScript increments it in some way so a different advert appears when appropriate.

I am trying to figure out some kind of if/then statement that that pulls
 the 728 x 90 unless the screen width is less than say 1000px. In that case it
would pull a different ad_slot that is a 320 x 100.

The example code from Google does exactly that with the two lines of styling code:

 .footer_1 { width: 320px; height: 100px; }
@media (min-width:800px) { .footer_1 { width: 728px; height: 90px; } }

These say "make the contents of any "ins" tag of the class "footer_1" show in a "box" that is 320x100px - but if the screen is 800px or wider show those same contents in a box 728x90px"

So I think the macro ought to read:

<override_macro name ="show_custom_ads" parameters="location" requires="servlet" >
    <n.as_html_comments.location/>
    <n.if.regex_matches text="[n.location/]" pattern="classic_special_ad">  
        <then>
            <div class="ad shaded-bg-color rounded" style="padding:.5em 0">
                <style type="text/css">
                                    .footer_1 { width: 320px; height: 100px; }
                                   @media (min-width:800px) { .footer_1 { width: 728px; height: 90px; } }
                            </style>
                            <ins class="adsbygoogle footer_1"
                                 style="display:inline-block;"
                                 data-ad-client="ca-pub-0XXXXXXXX"
                                 data-ad-slot="7560709341">
                            </ins>
                            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                            <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
            </div>
        </then>
    </n.if.regex_matches>             
</override_macro>

The areas where I have doubts about the code are:

<div class="ad shaded-bg-color rounded" style="padding:.5em 0">
The original Google code had some styling attached to the "div": style="text-align:center;
You might need to add the text alignment instruction to the padding instruction. Alternatively it might be handled already by whatever styling is added through the styling of anything of class "ad".

data-ad-slot="7560709341"
I am in your hands when it comes to which of the various advert numbers in your sample code should be used.

And more fundamentally, I still don't understand enough about why Hugo was supplying code that would produce a fixed size for the box that holds the ad as your brief in this topic, at least, was for something that was mobile-friendly, so I assumed needed to respond dynamically according to the device the page was being viewed on.

Obviously, I would recommend that you take a copy of the entire macro in place on your forum currently, before attempting to edit it with the code above. I could be hopelessly wrong about its effect!

[Harvey]

Wow Greg thanks.

No "red" errors but this is what I get:

 Error: parse exception in custom_tweak:ads - expected '=' not found for attribute 'async' at line 15
 in custom_tweak:ads:15

[GregChapman]

Hi Harvey,

I warned you I was shooting in the dark!

Now I look again I see there is a subtle difference between the equivalent lines in the "Hugo code":

<script type="text/javascript"  src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

and the "Google code" which I suggested inserting to replace it:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

I really am beyond my level of competence here.

The two JavaScript files (show_ads.js and adsbygoolge.js) while located in exactly the same folder, are different. I am not surprised by that as they have a subtly different job to do because of the different HTML code they are interacting with. However, I have no understanding of why, one has a leading "http:" to indicate its source and the other doesn't. Also, I have no idea why one includes "asnc" and the other includes "type="text/javascript" " instead.

I have just done a search on "javascript attribute async". Amongst others, that turns up:
http://www.w3schools.com/tags/att_script_async.asp

which includes the comment: "In XHTML, attribute minimization is forbidden, and the async attribute must be defined as <script async="async">. " so you could try making that change so the line becomes: <raw><script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>


I doubt very much that If that doesn't do the trick that I'll do any better with other suggestions. You really are asking a blind man to lead you now!

[Hugo <Nabble>]

Have you tried replacing the code in the "show_custom_ads" macro with the new one from google? I believe it should work.

[Harvey]

I would be very grateful if you could show me how to merge the google code with Naml.

Thank you.

[GregChapman]

Hi Harvey,

My post on  Nov 14, 2016; 3:28pm includes exactly what Hugo was suggesting, only you reported an error on on line 15. (Everything else has just been explaining my thought processes - but clearly sharing them wasn't too helpful!)

Here it is again with the change in the line 15 that I suggested in my last post to cope with the error.

<override_macro name ="show_custom_ads" parameters="location" requires="servlet" >
    <n.as_html_comments.location/>
    <n.if.regex_matches text="[n.location/]" pattern="classic_special_ad">  
        <then>
            <div class="ad shaded-bg-color rounded" style="padding:.5em 0">
                <style type="text/css">
                                    .footer_1 { width: 320px; height: 100px; }
                                   @media (min-width:800px) { .footer_1 { width: 728px; height: 90px; } }
                            </style>
                            <ins class="adsbygoogle footer_1"
                                 style="display:inline-block;"
                                 data-ad-client="ca-pub-0XXXXXXXX"
                                 data-ad-slot="7560709341">
                            </ins>
                            <script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                            <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
            </div>
        </then>
    </n.if.regex_matches>             
</override_macro>

If this doesn't work then I must hand over to Hugo.

@Hugo The "raw" tags seem to fail when I just post the corrected line alone. As you'll see in my previous post.

[Harvey]

IT WORKS!

Thank you so much Greg.  

[Hugo <Nabble>]

I am glad it worked. Greg's suggestion was exactly what I had in mind. Thanks Greg!

[Harvey]

This is big for me.  Our site is going mobile and this will allow the forum to remain up during our busy (ski) season.  That one 728 x 90 is more than 50% of our total revenue.

I'm going to the smaller avatars to make the forum work better in verticle phone mode.  I wish I didn't have to give up those large avatars.  Could we apply this process (media query to switch between small and large avatars for small and large screens?