Sitecore - How to show a new marketing promotional page on the same URL as existing home page

Hi Team,

Today i will share one of the solution that we did for one of our customer, I am sure you will or you already might have came across such requirements and found your self in multiple option/solutions and trying to find best suited one for your customer, here is the story and solutions we thought of and finally selecting one out of it which was the best in all scenarios

Also the solution was required in time sensitive deadline before their social marketing campaign begins so we had to come up with the solution and implement and go live before it.

Customer Requirement

They were doing a brand refresh, so whole site supposed to be revamped, With new user interface and UX, but that is a longer route, by the time we create that fully new site for them, they wanted to have a teaser home page, or a new home page to be shown just to give the visitor a feel of what is coming and they can market it using social campaigns.

So their need was, Whenever users visit a website (www.blahblah.com for example), Instead of old home page, it should show a new home page with new logo, new menus and new everything, and from there clicking on a "Go to website" button they can go to old website.

Looks fairly simple task right? But now it came with following caveats 

1) URL should not be changed, so no physical routes, but it should still load the new home page, Still preserving the old home page as we had to send user to old home page from that new marketing page.

2) Once user click on the "Go to website" from new marketing page, User should go to old home page without changing the URL again, and after that user should be in the old pages only, all the navigation should work "as-is"

3) Whenever they hit the site in the browser, always it should first load the new teaser (new home page)

4) From old site logo and all the links which takes user to a home page, should load the old home page only, because now user is into the old site.

5) From email campaign links or social media links or any links via search engine which points to website's home page, should first load the new teaser page (home page).

6) Site is multilingual, so new marketing page also had that language switcher and once language is changed the same marketing page should remain.

Possible solutions with their limitations

Because there are multiple ways of doing one thing, and we started thinking about possible approaches to this requirement, and we also noted down the drawback that came with each approach.

1) Change the startItem to new page

One of the first approach was to change the startItem of site from Sitecore site settings, But because this approach was every time loading the new home page, and to load the old home, page we needed to use the url like www.blahblah.com/home as a physical route, because now Sitecore is not treating this old home as start item, to access this item we had to give the physical path in the URL, this looked ok initially, that on the "Go to home" CTA on a new teaser page we can add www.blahblah.com/home route and it will load the old home page, But because this startItem is being referenced on Sitecore's link generator, all the links of the site needed to be changed or custom URL resolver needed to be written which can transform www.blahblah.com/home/about-us to simply have www.blahblah.com/about-us, and this approach we put on the shelve. 

2) Use redirects from old to new and new to old

Our customer's infra team said, They will use redirects from Azure Front Door to decided when to load which page, But this approach we clearly cancelled with reasoning that, we clearly need some identifiers to decide when to load which page and it can not be done without changing lot more from infra side, so it was also put on shelve.

3)  URL Referrer approach 

Our internal links when clicked will have referrers, our JS can identify if there is referrer and if its our internal page then allow them to go to old home page, and when there is no referrer or a refer which is not the current site then send them to new teaser page , but flow here was it will have flicker because JS can only be executed once page is loaded and it will not have the user experience we wanted.

4) UTM query string approach 

It had flow same as point-3, but then we also thought about reading these on our resolvers and then remove the query string before sending user to a page, otherwise all pages will have those UTM SOURCE attached, Also it might end up in too many redirect if not handled properly, Clearly we thought there can be better approach.

5) Use Personalization 

We were looking for a fast and efficient way to achieve this behavior, Though it can be achieved with personalization but lot of existing components needed to be changed and we wanted to stay away from changing existing components and let them work and behave as-is.

After all these thought process, we clearly knew, we need two things

1) Some how we need to know the way to send user to old and new page using some mechanism.

2) To do point-1 we needed identifier or a decision maker when to do that redirect

Final & Working Solution

ItemResolver with referrer as the identifier

 public class HomeItemResolvercs : HttpRequestProcessor

    {
        public override void Process(HttpRequestArgs args)
        {
            string referrerUrl = System.Web.HttpContext.Current.Request.UrlReferrer?.AbsoluteUri;
			// this is my site name in IIS, if you have it differently hosted, just change this to yours
            string mySiteUrl = "homepagepoc.localhost"; 
            // When path is of root and there is no referrer that means its organically hitting the site home page
            if(string.IsNullOrEmpty(referrerUrl) && System.Web.HttpContext.Current.Request.FilePath.Equals("/"))
            {
                var teaserItem = GetTeaserItem();
                if (teaserItem != null)
                    Context.Item = teaserItem;
            }
           // when path is of root and when there is a referrer that means, home link was clicked from somewhere 
           else if(!string.IsNullOrEmpty(referrerUrl) && System.Web.HttpContext.Current.Request.FilePath.Equals("/"))
            {
              // if from search engine or email campaigns, if referrer comes then also it should load teaser page, for our internal pages, it should always open old home page
               if(!referrerUrl.Contains("localhost") && !referrerUrl.Contains(mySiteUrl))
                {
                    var teaserItem = GetTeaserItem();
                    if (teaserItem != null)
                        Context.Item = teaserItem;
                }
               // for all other links load home page
                var homeItem = GetHomeItem();
                if (homeItem != null)
                    Context.Item = homeItem;
            }
           
        }

        private Item GetTeaserItem()
        {
            var sitecoreDB = Sitecore.Context.Database;
            var sitecoreQuery = $"/sitecore/content/Home/newhome";
            if (sitecoreDB != null)
            {
                var teaserItem = sitecoreDB.SelectSingleItem(sitecoreQuery);
                return teaserItem;
            }
            return null;
        }

        private Item GetHomeItem()
        {
            var sitecoreDB = Sitecore.Context.Database;
            var sitecoreQuery = $"/sitecore/content/Home";
            if (sitecoreDB != null)
            {
                var homeItem = sitecoreDB.SelectSingleItem(sitecoreQuery);
                return homeItem;
            }
            return null;
        }
    }

Small Explanation

Basically, The custom resolver has two main condition and checks 

1) It only executes if the request is for home page, So that other requested routes of other pages will load "as-is" without any issue

2) Because the code only executes when request is made for a home page, now the decision to load either teaser page (new home page) or old home depends on the referrer, 

3) From internal site links, if you want to open the new home page from any link, for example press release or something, you can simply add rel="noreferrer" (we used this for language switcher so that it loads the marketing page only but with new selected language)  to your anchor tags and it will load the teaser page, so you are in control.

When the page is directly hit in a browser, it does not have a referrer, and when someone clicks internal link or "Go to home" link on the page, It will automatically attach the referrer and that is our identifier to decide if we should load the new home page or the old home page, See the demo in action below

So, all organic clicks from search engine/ emails / direct browser url will always load the new teaser page and else all other links of the site, internal links will always load the old home page

Cheers !!! Small but useful solution :) 

NOTE: Don't forget to add the processor for this custom pipeline :), to help you I have put together the code and processor on the GITHUB link   

PS: My colleague Nelson   also worked on couple of other approaches and did POC on his end which reads the custom query string and when user is redirected to the page, those query string will be removed.