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
0 comments
Please sign in to leave a comment.