- Go to https://tagmanager.google.com.
- Select the website where you want to install contentlockr on:
Add tag & trigger
Go to Tags and click on ‘New’ to add a New tag.
Select Custom HTML to add the Contentlockr-script.
You can give a name to the tag (1), for example Contentlockr load.
In the code below you must replace [your-tenant-id] with the tenant-id given to you and replace .content-class with the class where your content is placed and where the call-to-action can show up after the given number of paragraphs.
After that, you can paste the code in the HTML-textfield (2):
<link rel="stylesheet" href="https://cdn.prdn.nl/sdk/latest/main.min.css" />
<script src="https://cdn.prdn.nl/sdk/latest/main.min.js"></script>
<script>
var env = {
tenant: "[your-tenant-id]",
spa: true,
explicitRecaptchaLoad: true,
locale: "en",
users: {
enabled: true,
jwtCookie: {
name: "strapi_jwt",
expires: 30 * 24 * 60 * 60,
},
},
unlocker: {
enabled: true,
content: {
id: null,
access: {
leads: false,
subscribers: false,
all: false,
new_leads: false,
access_period_hours: null,
},
},
lock: {
numberOfParagraphs: 1,
contentContainerSelector: ".content-class",
},
ctas: {
leads: {
title: "Unlock this content",
bodyHTML: "<p>This content is only accessible for newsletter subscribers. Subscribe to our newsletter and you get instantly access to this article.</p>",
emailFieldPlaceholder: "name@company.com",
unlockButton: { text: "Unlock with email" },
googleButton: { text: "Unlock with Google" },
linkedInButton: { text: "Unlock with LinkedIn" },
success: {
title: "<h5> Check your mail </h5>",
body: "We’ve just sent you an email with a link to read the full article ",
},
failed: {
title: "<h5> Error </h5>",
body: "Something went wrong while subscribing. Please try again later.",
},
poweredBy: true,
},
newLeads: {
title: "",
bodyHTML: "<p>Sign up to our free newsletter to unlock this article.</p>",
emailFieldPlaceholder: "",
registerButton: { text: "Unlock with email" },
googleButton: { text: "Unlock with Google" },
linkedInButton: { text: "Unlock with LinkedIn" },
success: {
title: "<h5> Successfully subscribed </h5>",
body: "We’ve just sent you an email to unlock this article and to verify your email address.",
},
},
subscribers: {
title: "Continue reading?",
bodyHTML:
"<p>You can’t read this article, because you’re not logged in. Login or become a member to get access to our premium content. You will also receive our popular newsletter.</p>",
subscribeButton: { text: "Become a member", link: "?nr_sales_order_form=true" },
loginButton: { text: "Login", link: "?nr_users_login=true" },
},
},
},
};
nr.configure(env);
</script>
Now you can click on Choose a trigger to make this tag fire… (3) to create a trigger and define when the code is being fired.
Click on the +-icon to add a new trigger.
(1) You can enter the name of the new trigger, for example: Contentlockr load on DOM ready. Click on Choose a trigger type to begin set-up and select DOM Ready.
Click on Save (1) to save the trigger.
Click on Save (1) to save the Tag.
Optional: Add new variable
If you want to fire Contentlockr based on a variable, which is not already available as Built-In Variable, you can select Variables (1) in the left menu and select ‘New’ (2) to add a New variable.
If you want to trigger Contentlockr based on a Built-In Variable like Page URL, you can go the next chapter (Add another tag & trigger).
In this example we add a new (user-defined) variable, so we can later on trigger Contentlockr when the element (.tag a) is loaded on the website.
Select the Selection Method (1), enter the element selector (2), give the Variable a name (3) and click on Save (4).
Add another tag & trigger
You can select in the left menu Tags (1) and click again on New (2) to add a new tag.
You can select Choose a tag type to begin set-up (1) and click on Custom HTML (2).
In the HTML text field you can paste the following code (1):
<script>
(function () {
var scriptEl = document.currentScript;
var runScript = function () {
if (!window.nr || !window.nr.Unlocker) return;
window.nr.Config.unlocker.content.id = 1;
window.nr.Config.unlocker.content.access.leads = true;
window.nr.Unlocker.handleContentAccess();
if (scriptEl && scriptEl.parentNode) scriptEl.parentNode.removeChild(scriptEl);
};
if (window.nr && window.nr.Unlocker) {
runScript();
} else {
window.addEventListener("nr-sdk-initialized", runScript);
}
})();
</script>
And you can select Choose a trigger to make this tag fire… (2).
Click on the +-icon (1) to add a trigger.
Give a name to the new trigger (1), for example Contentlockr run on Element Visibility and click on Choose a trigger type to begin setup… (2) and select Element visiblity (3).
In the following screen you can configure when the Contentlockr script has to run. In this example the script will run when the CSS class .content-text, every time the element appears on screen (1). Further more (2) Observe DOM changes is checked and the trigger ‘fires on Some Visiblity Events’ with the following condition: {{tag}} contains contentlockr. So Contentlockr only fires when the tag contentlockr is named on the web page. Feel free to use the condition that suits you, like a condition within {{Page URL}} for example.
Don’t forget to name the tag, for example as: Contentlockr run. You can now click on Save.
Click Preview or Submit (1) and follow the next steps to see if Contentlockr is working correctly.
