your £$ support needed

part of a small rebellion | by maryann johanson

I need some help with CSS, WordPress, php(?) and/or javascript(?)

I want to do something with the site that I think is technically possible but is way beyond my meager capabilities. If you can help me out, we can work out compensation. I can’t pay a lot, but I hope we can decide on something fair and reasonable.

What I want to do is have two versions of the site: one that shows ads to nonsubscribers, and one without ads for logged-in subscribers.

With Tinypass, I can set up dynamic classes that indicate whether a site visitor is logged in or not. I’m already doing something very simple with that: visitors who aren’t logged in see, in the sidebar, a list of pages that nonsubscribers can visit for free even if they’re out of pageviews for the week; subscribers don’t see that because there’s no reason for them to see it. But that uses a simple CSS trick.

What I need is some way for WordPress (which uses php) to determine whether a visitor is logged in or not, and then load adcode in a particular position (like at the top of a page) for visitors who aren’t logged in, but not load the adcode for visitors who are logged in.

I suspect that javascript can handle that, but I know nothing about javascript. Maybe there’s even a simple trick that can handle that. I just don’t know.

If you can help me out, please let me know. Thank you!

posted in:
maryann buzz
  • MinstrelOfC

    Caveat: I’m not an expert, I’ve just played around with javascript/jQuery/etc. I’ll include a bit at the end of problems that I can see with my suggestion.

    It looks like this should be pretty simple — you’ve got jQuery loaded, so here’s a simple way to do it:

    if(window.jQuery(‘.tpmHasAccess’).length === 0) {
    window.jQuery(‘Ads for some, no ads for others!’).appendTo(window.jQuery(‘#logo-area’))

    To test:
    Copy the code, hit F12, paste it into the console and hit enter. (note that pasting javascript code into the console *can* be unsafe, so don’t trust random people. Make sure you understand what the code does first.)
    If you’re logged in, it should just say ‘undefined’ and do nothing. If you’re not logged in to TinyPass, it should work!

    To use:
    1) replace the Ads for some, no ads for others! part with the adcode — keep the single quotes from the outside, and if there are any single quotes in the adcode, put a backslash before them (‘Joe’s’ => ‘Joe’s’)
    2) Put an empty div wherever you want the ads to appear. Give it a unique CSS id (or class — just make sure it’s unique)
    3) Replace #logo-area with the CSS selector from step 2 (be sure to include the ‘#’ or ‘.’ part, as appropriate)
    4) Put the modified code in a … block at the *end* of the ….
    5) Bask in the ad revenue.

    How this works:

    The free page links are given a CSS class of .tpmMetered if the visitor is not logged in to TinyPass, and .tpmHasAccess otherwise.
    So the if test is finding all .tpmHasAccess elements on the page, and only if there are exactly zero, proceeding with the insertion.

    Inside the if, we construct a div, then append it to *all* blocks which are found by the window.jQuery search — if, in the sample code, you replace ‘#logo-area’ with ‘div’, you can see how horrible this can be.

    That’s about it. Problems I can see with this approach are:
    1) if TinyPass changes their code to use a different class name than .tpmHasAccess, then ads will be displayed to everyone. (Upside, someone will likely notice and say something)
    2) If somehow there’s an element on the page of not-logged-in users called .tpmHasAccess, then no ads will be displayed.
    3) If you change the name of the unique ad div (or remove it), then no ads will be displayed.
    4) Professional JavaScript programmers would probably object to bare JS in document like that. (they’d want it in a separate file, combined with all the other JS on the page, minimized, etc, etc, etc — a lot of work that could save effort down the road, but takes time now)

    For those who care: the above took me about 20 minutes to write the code (including time to figure out .tpmHasAccess, and time to remind myself how jQuery works), and about an hour to write the documentation (ie. the rest of the comment)

  • Thank you for the quick response. I don’t know about that F12 and console stuff — I suspect that’s Windows sorcery, and I’m on a Mac.

    But I tried out the rest of your instructions, and it’s not working.

  • Oops! Actually, the ad is showing up at the *bottom* of the page, where the code that’s supposed to be inserted at the *top* of the page is residing. (In the bit you said should go right above the close-body tag.)

  • I’ve just deleted the script from the bottom of the page, cuz I don’t want to get into trouble with the ad network for running an ad that’s supposed to be at the top of the page on the bottom (where no one will see it). But here’s what it looked like:

  • MinstrelOfC

    Just got home from work, so I’m here now.

    Ahh – I see what’s happening; the ad-code is getting parsed as part of the page, rather than as Javascript.

    There’s a couple of possibilities, the most likely (and easiest to fix) is just that the script isn’t wrapped in the right tags.

    The whole block you need to add to the end of the page is:

    if(window.jQuery(‘.tpmHasAccess’).length === 0) {
    window.jQuery(‘Ads for some, no ads for others!’).appendTo(window.jQuery(‘#advertHeader’))

    If that’s what you had, then the problem’s likely something to do with WordPress Templating (I’m guessing)

  • I was using the right tags. Perhaps there’s something in the actual adcode that is causing the parsing problem? Here’s the whole actual thing:

    if(window.jQuery(‘.tpmHasAccess’).length === 0) {
    window.jQuery(‘var vclk_options = {sid:16300,media_id:1,media_type:5,version:”1.4″};‘).appendTo(window.jQuery(‘#advertHeader’))

  • I can possibly help also. I’ll be in the office in about an hour and can look then.

  • Thank you!

  • MinstrelOfC

    I was able to solve some of the problem by adjusting the code (it was the closing tags that were causing this issue); however, it looks like there are more problems.

    Essentially, the Ad networks use a feature called ‘document.write’ to put their ad on the page. The problem with is that ‘document.write’ can’t write to the page after it has loaded (there are other ways to do that), and my logged-in-user detection script needs to look at the loaded page to see if it should run.

    (I even found someone who had written a way around that: https://coderwall.com/p/z_pueg — but he warns that certain ad networks (incl. Google Adsense) will ban you if you try to use it)

    There might still be a way around it, but I don’t see anything too straight-forward from my reading on the TinyPass site.

    (Of course, what would work, but would almost certainly get you banned from the ad network, is to load the ad for everyone, but hide it for subscribers)

    I hope Rich can come up with a working solution…

  • OK I’ve thought about this a bit and the only thing I can think of is some script that forwards you to an ad or non-add page based on your logged in status. I can try to write an example here in a second. So it would be if(loggedIn){ goto http://xxxxxxx} else {goto:addxxxx}

  • Better yet this guy makes some sense, check the third comment down.


    Did you put that script at the end of the page?

    If you can place it in the spot you want the adds to show it may solve your problem.

  • MinstrelOfC

    We could try the in-location approach, the issue being that if we put the script higher, the div that we’re looking for isn’t in the document yet.

    We might be able to solve that by putting a .tpmHasAccess block just before the code.

    The adjusted code would be:

    if(window.jQuery(‘.tpmHasAccess’).length === 0) {
    document.write(‘var vclk_options = {sid:16300,media_id:1,media_type:5,version:”1.4″};’)

    (this code even gave me an ad on a local file, so it certainly should work)

    To try it out, replace the advertHeader div with the above, and you’ll need to put a div above it that’s set up exactly like the “free pages” links on the sidebar — note that it doesn’t have to have any size to it, or be visible — we only need it to get the correct CSS class.

    It’s still possible this won’t work, as TinyPass might wait until the page is fully loaded before adding its classes, in which case… well, we’re still almost there. (We’ll just need a way to determine TinyPass’ state through JS)

  • That sounds about right. You can place the JS for tiny pass ahead of this code, which may insure it’s code executes first.

  • MinstrelOfC

    Aye, the tinypass JS is imported in the head tag, so we’re good there — I’m just worried that it waits for DOMContentLoaded to apply classes (As I’m not aware of any way it could modify them as they’re entering the DOM)

  • load the ad for everyone, but hide it for subscribers

    Yes, that would almost certainly be a huge no-no.

    I even found someone who had written a way around that

    Yeah, that link almost instantly gets way out of my comfort zone.

    Thank you for trying. Please email me at maryann@flickfilosopher.com so we can figure out some compensation for your efforts.

  • Well, as you can see, the adcode is working, but it’s showing up even for those who are logged in.

  • Well, as you can see, the adcode is working, but it’s showing up even for those who are logged in. (Repeating this comment so you both get notified of it.)

  • All right gotta jump on a train out of DC. Will take another look after I get home and settle the family.

  • LaSargenta

    Bwahahaha! And the ad is for Gas-X!

    (“From Cinema Seat…”)

    I think it would be awesome if you could get this ad to only show up on pages about Seth McFarland or Adam Sandler!

  • Thank you.

    I will also want you to email me at maryann@flickfilosopher.com at some point so we can figure out some compensation for your efforts. Even if this ends up not working.

  • MinstrelOfC

    Okay, I think I’ve got something working!

    advertHeader code:
    (I’m using pastebin because the code’s getting a bit long for comments)

    And at the end of the tag:

    Here’s how it works (because it is a bit more complicated):

    When someone first arrives on the site, we show them an ad (no matter what). Then, once the page is finished loading, we check to see if they’re a subscriber, and set a cookie.

    When someone returns to the site (or navigates to a new page), we check the cookie, and subscribers do not get ads displayed. (We still check after page load, and if they should have got an ad, we reload the page to show them one)

    I think this is the best trade-off (pending your approval, of course), as you probably get a lot of drive-bys (people who load one page and leave) that you’d like to serve ads to. Subscribers should only get one ad the first time they visit, and never again (unless they clear their cookies for your site – but if they cleared all their cookies they’d have to log back in to TinyPass anyways).

    If you would like ad display under different conditions, let me know and it should be an easy fix.

    (on a more technical note, it was as I feared — TinyPass only checks to see if it’s a subscriber after the page is loaded, and then updates CSS classes at that point — that’s why we can’t do it all in one page load)

  • I’m afraid that didn’t work either: ads kept showing up even when you’re logged in.

    Something was also making the site behave strangely in Firefox: pages wouldn’t load fully, would hang while loading, stuff like that. (Chrome and Safari — these are all on my Mac — didn’t seem to have this issue.) So I deleted the code.

  • ajthomascouk

    Hi Mary, Is this still an issue? It’s relativly simple to do and you don’t need to use javascript.

Pin It on Pinterest