[Code] Block Access After x Page Views

Article author
Duncan Hamra

In this article, Nicolas breaks down two custom code snippets you can use to block access to content after a certain number of seconds have passed. After the page count threshold has been reached, the user will get kicked to a page of your choosing. 

Block Access from Non-Members

In this article, Nicolas breaks down a custom code snippet you can use to block access to content for non-members. In other words, all members will have access and will not get redirected.

You'll want to add the following code to the Footer or <Body> section of any page that appears in your list of pages (0:40 in the video above). 


<script>
const logPageView =
  ({ pageLimit, redirectTo }) =>
  async (path) => {
    let pageViews = localStorage.getItem("pageViews") || "{}";
    pageViews = JSON.parse(pageViews);
    if (!pageViews[path]) {
      pageViews[path] = 0;
    }
    pageViews[path]++;
    let totalPageViews = 0;
    for (const [, views] of Object.entries(pageViews)) {
      totalPageViews += views;
    }
    if (totalPageViews > pageLimit) {
      window.location.href = redirectTo;
      return;
    }
    localStorage.setItem("pageViews", JSON.stringify(pageViews));
  };

function manageViews({ pageLimit, redirectTo, pages, condition }) {
  let path = window.location.pathname;
  const logView = logPageView({ pageLimit, redirectTo });
  // updated to match exact paths, last version was incorrect
	if(condition === "exact") {
     pages.forEach((page) => page === path && logView(path));
  }
  if (condition === "includes" || condition === "starts with") {
    pages.forEach((page) => {
      condition === "includes" && path.includes(page) && logView(path);
      condition === "starts with" && path.startsWith(page) && logView(path);
      return;
    });
  }
}

window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
  !member && manageViews({
    pageLimit: 5, // total of views before redirecting | integer
    redirectTo: "/access-denied", // page to redirect to | text
    pages: ["/"], // array of pages
    condition: "exact", // "exact" | "includes" | "starts with"
  });
});
</script>

Block Access Based on Plans

In this section, Nicolas will show you how to block access to content based on a member's plans.

Copy and paste the following code snippet into your site's Footer or <Body> section of your site. You can see how Nicolas did it in the video above at around the 1:50 mark. 

Be sure to watch the whole video and update your code based on Nicolas's instructions. 

<script>
const PLAN_ALLOWLIST = ["pln_cku4gsei0000209l2hj3fdb4l", "pln_cku48230m9000209l2iseb4l"]

const logPageView =
  ({ pageLimit, redirectTo }) =>
  async (path) => {
    let pageViews = localStorage.getItem("pageViews") || "{}";
    pageViews = JSON.parse(pageViews);
    if (!pageViews[path]) {
      pageViews[path] = 0;
    }
    pageViews[path]++;
    let totalPageViews = 0;
    for (const [, views] of Object.entries(pageViews)) {
      totalPageViews += views;
    }
    if (totalPageViews > pageLimit) {
      window.location.href = redirectTo;
      return;
    }
    localStorage.setItem("pageViews", JSON.stringify(pageViews));
  };

function manageViews({ pageLimit, redirectTo, pages, condition }) {
  let path = window.location.pathname;
  const logView = logPageView({ pageLimit, redirectTo });
  if(condition === "exact") {
     pages.forEach((page) => page === path && logView(path));
  }
  if (condition === "includes" || condition === "starts with") {
    pages.forEach((page) => {
      condition === "includes" && path.includes(page) && logView(path);
      condition === "starts with" && path.startsWith(page) && logView(path);
      return;
    });
  }
}

function checkPlans({ plans, filter }) {
  return plans.some(plan => {
    let hasPlan = filter.includes(plan.planId) && plan.status === "ACTIVE"
    return hasPlan
  });
}

window.$memberstackDom.getCurrentMember().then(({ data: member }) => {
	let plans = member?.["planConnections"]
	if(member && plans) {
	  let hasPlans = checkPlans({ plans, filter: PLAN_ALLOWLIST })
	  !hasPlans && manageViews({
	    pageLimit: 5, // total of views before redirecting | integer
	    redirectTo: "/smart-watchlists", // page to redirect to | text
	    pages: ["/"], // array of pages
	    condition: "exact", // "exact" | "includes" | "starts with"
	  });
	}
});
</script>

Was this article helpful?

Comments

2 comments

  • Comment author
    MJ Petroni

    Is there a way to do this for specific elements and not just entire pages? Also, what effect would this have on SEO?

    Thanks

    1
  • Comment author
    Duncan Hamra

    Hey MJ Petroni It's possible, but would require updates to the custom code. 

    And I'm not entirely sure how it would effect SEO 🤔 

    0

Please sign in to leave a comment.