Show element on page load - only when referred from external url

HippySunshine

Senior Member
On a WordPress site, I have a quote generator which needs to be displayed on every page (as a screen overlay) when that page is loaded from and external URL only.
So when the site/page is visited from google, the quote will load on that page. When navigation internally through the site, none of the pages will load the quote.

This is pretty hard to explain so I hope it makes sense.

I currently have the following code, but the quote loads on every page load, even when navigating internally through the site, and I don't want that.
This is a tad new to me, never done it before, so if someone could point out where I've gone wrong, if you at all understand my terrible explanation, that would be great.

This is also pretty hard to test on a local WP site :/

HTML: Firstly, is the header.php the best place for this?
HTML:
<div class="quote-overlay">
    // the quote plugin shortcade to randomly load the quotes
    <?php echo do_shortcode('[quotcoll orderby="random" limit=1]'); ?>
</div>

This is in my custom.js:
JavaScript:
$(document).ready(function () {
    var referrer = psl.parse(document.referrer.toString().replace(/(^\w+:|^)\/\//, "").replace(/\/$/, ""));
    var current = psl.parse(document.location.toString().replace(/(^\w+:|^)\/\//, "").replace(/\/$/, ""));

    if (referrer.domain !== current.domain) {
        $('.quote-overlay').show().delay(2500).fadeOut('slow');
    }
})

Thank you :)
 
Assuming they can land on any page from any site this is going to be complicated. JS isn't going to work for you, you may need to employ Ajax as well as the JS function will be destroyed on page load.

It's also not clear if they see the quote every time or just their first visit.

If the former you can do this with a cookie. When they click to close the modal it remembers the state. Set the cookie to expire after an hour and all is happy.
If it's the latter you will need permission (it's a privacy issue).
 
The quote needs to be visible every time they visit, but only from that external referral, no internal page loads.
Do you know how I go about this using AJAX? Not really sure on where to start with that.

Thank you
 
Identifying external referrals isn’t easy. For example someone opening the site in a new tab can muddy the waters. Or they could be using an online bookmarked link or any of the dozens of other sources. And if they use the back button at all starts to fall over.

About all you can do is identify if this is the first page of a session. And to do that you need session cookies. I thought Ajax could work but it doesn’t.

And if cookies are blocked then the modal will keep in showing.
And you will need an action to close the modal, this would be the trigger to remember the state.

There are plenty of tutorials if you search on how to set up a one time use modal.

There is JS function called localstorage that doesn't use cookies but this doesn't expire when they leave the site, it only expires when the browser is closed. This might work for you:

Code:
jQuery(document).ready(function($){
    var initreferrer = document.referrer;
    if(initreferrer.indexOf('yourdomain.com') === -1 ) { // Check if the referer is your site or not. If not( return -1 ) set the localStorage.
        localStorage.setItem("mysite_referrer", initreferrer);
    }
});
 
Back
Top