Change page elements for users entering from a specific URL

Question

I'm building a webpage on which I want certain elements of a div to change (background color and logo) for users who enter the page from a specific redirect URL. Previously I would just make two separate versions of the page and get the redirect URL to point to the second one but with duplicate content a no no I was wondering if there was a dynamic solution that can make the changes to the original page?

score 1 · Accepted Answer · edited Sep 21 '16 at 07:34

1

You're looking for the document.referrer property:

if (document.referrer.indexOf("www.example.com") !== -1) {
    // Do stuff if user is coming from example.com
    $('#theDiv').css('background', 'red'); 
}

You can also check using regex or operators.

edited Sep 21 '16 at 07:34

Mani

2,675
2
20
42

answered Sep 21 '16 at 07:32

ezakto

3,174
22
27

Referrer will only work on initial entry to the site. What happens when the user clicks around within the site? What happens when they arrive via bookmark? – John Wu Sep 21 '16 at 08:49
He wants to detect users *"who enter the page from a specific redirect URL"*. That discards any user that arrive via bookmark (referrer will be an empty string). He always can save the first arrival to a cookie/sessionstorage/localstorage if he needs to keep track of the user clicking around. I think that's out of the scope of the question. – ezakto Sep 22 '16 at 07:11

score 0 · Answer 2 · edited May 23 '17 at 12:06

Extract the url-parameters using something like this: Get url parameter jquery Or How to Get Query String Values In js

Then use the parameters as a "flag" in ur code to change the look and feel with Javascript.

Pseudo code:

var urlColor = getURlParamater(Color)
switch(UrlColor){
     case "blue":
          setBackground(blue)
     case "red":
          setBackground(red)
     default:
          setBackground(white)
}

score 0 · Answer 3 · answered Sep 21 '16 at 07:39

On the server, you can use the 'Referer' HTTP header to see where a user came from and give a different response accordingly. Browsers may not always provide this information to you however.

Alternately, if both the redirecting page and the destination page are on the same server, there are many other ways you could try tracking the user (eg. sessions, user-agent profiling, etc).

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

Two URLs, two brands, one code base

I'm assuming you want one set of HTML code served from two different URLs. You want to make it look like you have distinct web sites with different branding, but you want them to share all their content. And I'm assuming you want to do this all with HTML, Javascript, and CSS; no server side path mapping.

This approach requires a few steps but will be forward compatible to as many brands as you want.

Step 1

Move your style definitions to a set of external style sheets. You should have a global.css (for common styles) plus a style sheet for each of your background color/logos (say, company1.css and company2.css). (If you don't know how to define image URLs in the CSS, click here).

Step 2

If your two sites are on different domains (e.g. http://www.company.com and http://www.company2.com) then use location.host to detect which brand to display.

    var companyName = document.location.host.split('.')[1];  //take middle segment, e.g. in "www.company1.com" extract the "company1"

OR

If your two sites are on the same domain, but with different paths (e.g. http://myhosting.com/company1 and http://myhosting.company2 then use document.location plus perhaps the split function to parse the URL and figure out which brand to display.

var companyName = document.location.split('/')[4] //your code may differ depending on your path scheme

Step 3

See this article on how to use Javascript to dynamically switch stylesheets.

Ta-da

When you're done it'll look a little bit like this:

var companyName = document.location.host.split('.')[1];
var head  = document.getElementsByTagName('head')[0];
var link  = document.createElement('link');
link.id   = 'branding';
link.rel  = 'stylesheet';
link.type = 'text/css';
link.href = companyName + ".css";  
link.media = 'all';
head.appendChild(link);