Set Landing Pages to Expire

[Anonymous]

Hi everyone,

Is there a way to have a landing page expire after a certain period of time? For example say for a webinar registration page, after the webinar date the page would direct to a "this event has occurred" kind of message? Or would this be a manual process of going back and editing the page after the event has happened?

Looking forward to everyone's thoughts!

Thanks!

Alec

[Manish_Khemani1]

Hi Alec,

Marketo Sky (MS) has an 'Expiration' feature that allows you to set an expiration date for Landing pages & Smart campaigns. 

In MS go the the program containing the landing page, navigate to assets where you should see an option for Expiration. Now select the asset and there is a button on the far right 'Set expiration' which allows setting an expiration date and time.

Try it out 😀.

-Manish

[SandyBarta99]

thanks Manish, however I need the redirecting to the new landing page as well

[SanfordWhiteman]

Hi Manish,

Marketo Sky (MS) has an 'Expiration' feature that allows you to set an expiration date for Landing pages & Smart campaigns. 

That feature doesn't meet the requirements in this case.

[Robb_Barrett]

Sanford posts "Do a search" and gets marked correct.  I post a fiddle and get no love.

The system is rigged.

[SanfordWhiteman]

Sorry man. Joe Reitz​ you can switch the Correct to Robb.  (Though in fairness I posted code, too, if you search. )

[Robb_Barrett]

I was one "Correct" away from Blogging Rights, but it looks like I got it somehow anyway.

[SandyBarta99]

Hi,

I came across your post, but I am struggling. This is my code, but nothing seems to be picked up. I would appreciate any help as I am not a coder. I am using Marketo landing pages. I add this into the live registration landing page

<script type="text/html" id="livepage-html">{{my.ZLive-Page}}</script>
<script type="text/html" id="expiredpage-html">{{my.ZExpired-Page}}</script>
Then....
<div id="body-stuff"><br /></div><script>
if (new Date() > new Date('{{my.ZExpiration-Date}}')) {
  document.getElementById('livepage-html').className = "hidden";
  document.getElementById('expiredpage-html').className = "shown";
} else {
  document.getElementById('livepage-html').className = "shown";
  document.getElementById('expiredpage-html').className = "hidden"
}
</script>

[SanfordWhiteman]

That doesn't look right (or at least complete). Adding/removing a class on a data block doesn't do anything on its own.

You want more like

<div hidden data-datesensitive-show-until="{{my.Expiration Date}}">{{my.Live Content}}</div>
<div hidden data-datesensitive-show-after="{{my.Expiration Date}}">{{my.Expired Content}}</div>

<script>
/* 
  No need to make any changes to this code!
  All config is via data- attributes on 
  conditional elements, as above.
*/
/*
 * Naive date-sensitive element revealer
 * @author Sanford Whiteman
 * @version v1.1.0 2021-05-15
 * @copyright © 2021 Sanford Whiteman
 * @license Hippocratic 2.1: This license must appear with all reproductions of this software.
 *
 */  
(function(){
  const arrayify = getSelection.call.bind([].slice);
    
  const now = new Date();
  
  let axes = ["after","until"];
  let stor = axes.map(function(axis){
    return "[hidden][data-datesensitive-show-" + axis + "]";
  }).join(",");
  
  function makeDate(dateLike){
    dateLike = dateLike.replace(/ /,"T"); // IE requires  'T' as in ISO 8601:2019
    return new Date(dateLike);
  };
  
  arrayify(document.querySelectorAll(stor))
  .map(function(el){
    let conditions = axes.reduce(function(acc,nextAxis){
      acc[nextAxis] = el.getAttribute("data-datesensitive-show-" + nextAxis);
      return acc;
    },{});
    
    return { 
      el : el,
      after : conditions.after ? makeDate(conditions.after) : -Infinity,
      until : conditions.until ? makeDate(conditions.until) : Infinity
    };
   })
  .filter(function(desc){
      return (desc.after <= now) && (now < desc.until);
  })
  .forEach(function(desc){
      desc.el.hidden = false;
  });

})();
</script>

You do not have to alter the JS at all in this method; it automatically applies to an unlimited number of containers with the data-datesensitive-show attribute.

[SandyBarta99]

Thanks Sanford,

 Not sure why It doesn't work for me.

 Copied code straight into an html box in my LP page.

 Created the tokens

• Expiration Date- as Date
• Expired content - as rich text -marketolp/webinar-sara_reg.html
• Live content - as  rich text      -marketolp/webinar-sara_Lateregistration.html

[SanfordWhiteman]

Would have to see the live page this is on.

[SandyBarta99]

this is my test - Marketo lp

[SanfordWhiteman]

I mean a link to the real page, not a screenshot.

[Vidhi]

Hi @SanfordWhiteman ,

Hope you're keeping well!

I am trying to set the expiration on either form or Landing Page once the webinar has expired and navigate to a different landing page.

Out of the other solutions, I tried this code as you've shared years ago but it is not working at my end. Perhaps, I am not passing the right values in the newdate function.

Here is the link to my landing page. Not sure if you can access this.

http://058-FRO-515.mktoweb.com/lp/058-FRO-515/HP_WBN_2023-04-20_WebinarTest_LP-WebinarRegistration.h...

<div hidden data-datesensitive-show-until="{{my.WBNExpirationDate}}">{{my.WebinarLive-Page}}</div>
<div hidden data-datesensitive-show-after="{{my.WBNExpirationDate}}">{{my.WebinarExpired-Page}}</div>
<script>
/* 
  No need to make any changes to this code!
  All config is via data- attributes on 
  conditional elements, as above.
*/
/*
 * Naive date-sensitive element revealer
 * @author Sanford Whiteman
 * @version v1.1.0 2021-05-15
 * @copyright © 2021 Sanford Whiteman
 * @license Hippocratic 2.1: This license must appear with all reproductions of this software.
 *
 */  
(function(){
  const arrayify = getSelection.call.bind([].slice);
    
  const now = new Date();
  
  let axes = ["after","until"];
  let stor = axes.map(function(axis){
    return "[hidden][data-datesensitive-show-" + axis + "]";
  }).join(",");
  
  function makeDate(dateLike){
    dateLike = dateLike.replace(/ /,"T"); // IE requires  'T' as in ISO 8601:2019
    return new Date(dateLike);
  };
  
  arrayify(document.querySelectorAll(stor))
  .map(function(el){
    let conditions = axes.reduce(function(acc,nextAxis){
      acc[nextAxis] = el.getAttribute("data-datesensitive-show-" + nextAxis);
      return acc;
    },{});
    
    return { 
      el : el,
      after : conditions.after ? makeDate(conditions.after) : -Infinity,
      until : conditions.until ? makeDate(conditions.until) : Infinity
    };
   })
  .filter(function(desc){
      return (desc.after <= now) && (now < desc.until);
  })
  .forEach(function(desc){
      desc.el.hidden = false;
  });

})();
</script>

However, I have not changed much and tried to achieve the output from your code.

Any help would be appreciated.

Kind Regards,

Vidhi 

[Robb_Barrett]

Here you go:

Hidden Divs - JSFiddle

[Robb_Barrett]

I'll take Sanford's reply a step further.

In your page template, put in this:

<script type="text/html" id="livepage-html">{{my.Live-Page}}</script>

<script type="text/html" id="expiredpage-html">{{my.Expired-Page}}</script>

Then....

<body>

<div id="body-stuff"></div>

</body>

<script>

if (new Date() > new Date('{{my.expiration-date}}')) {

document.getElementById('body-stuff').innerHTML = document.getElementById('expiredpage-html').innerHTML;

} else {

document.getElementById('body-stuff').innerHTML = document.getElementById('livepage-html').innerHTML;

}

</script>

Then, obviously, in your program put in the following tokens:

expiration-date (type DATE)

Live-Page (type RICH TEXT)

Expired-Page (type RICH TEXT)

Here's an example:

Make an expiration page - JSFiddle

[Ayan_Talukder]

Really appreciate you sharing the code Robb. Just to clarify for the tokens:

Live-Page = Landing page URL

Expired-Page = Re-direct to page with message

Is that right?

[SanfordWhiteman]

... but if both HTML variants are going to be pulled into the DOM no matter what, why contain them in <SCRIPT> tags as you would arbitrary non-HTML data? 

It'll be slower to use innerHTML, which causes a reflow and reparse, than to use a hidden parent element and simply move its children under the visible node.

[SanfordWhiteman · Accepted solution]

Search the Community as this has been answered before. Basically, there is no ​true​ expiry but you can add a standard JS snippet to every page that, together with a {{my.token}} storing the expiration date, can redirect people to a "Thanks... for trying" page/popup/etc.