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>
Comments
2 comments
Is there a way to do this for specific elements and not just entire pages? Also, what effect would this have on SEO?
Thanks
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 🤔
Please sign in to leave a comment.