Web Push Content Gating

With Aimtell, you can easily create gated content to encourage visitors to subscribe to your push notifications.

Gating content is generally referred to as the process of putting resources (e.g., white papers, case studies) behind a form or registration, requiring visitors to subscribe before granting them access to the resource.

With Aimtell, you can easily create gated content to encourage visitors to subscribe to your push notifications. This article walks you through the basic steps of achieving that.

Step 1: Defining The Hidden Content

Start with defining what content you want to be shown to those who have granted permission, and those who have not. Below is a simple example of how that could be structured.

<!-- This content will always be visible -->
<div id='visibleContent'>
     <p> Be sure to subscribe to our notifications to get access to our sweet content below. </p>
</div>

<!-- This content will only be visible if the visitor has approved permissions to your notifications -->
<div id='gatedApprovedContent' style='display:none'>
     <p> Here's a link to our content!</p>
</div>

<!-- This content will only be visible if the visitor has denied permissions to your notifications -->
<div id='gatedDeniedContent' style='display:none'>
     <p> Oh, boy! Looks like you've haven't granted permissions. You'll need to accept permissions if you want access...</p>
</div>

Step 2: Showing The Content Based On Permissions

Next, you'll need to add some logic to show the content based on their current permissions. This is done via aimtell javascript.

//define what should be done for those who have granted permission
function _aimtellPermissionGranted(){
     document.getElementById('gatedApprovedContent').style.display = 'block';
     document.getElementById('gatedDeniedContent').style.display = 'none'; 
}

//define what should be done for those who have not granted permission
function _aimtellPermissionDenied(){
     document.getElementById('gatedDeniedContent').style.display = 'block'; 
}

//wait till aimtell is fully loaded before running everything
function _aimtellReady(){

    //if they have granted permissions
    if(_aimtellCheckPermissions() == 'granted'){ 
       _aimtellPermissionGranted(); 
    }
    //if they have not granted permissions (or denied it)
    else{ 
      _aimtellPermissionDenied(); 
    }

}

Step 3: Putting it all together

That's it. You'll just need to add those both to your page and you're all set! So together it would look like this on your page.

<!-- This content will always be visible -->
<div id='visibleContent'>
     <p> Be sure to subscribe to our notifications to get access to our sweet content below. </p>
</div>

<!-- This content will only be visible if the visitor has approved permissions to your notifications -->
<div id='gatedApprovedContent' style='display:none'>
    <p> Here's a link to our content!</p>
</div>

<!-- This content will only be visible if the visitor has denied permissions to your notifications -->
<div id='gatedDeniedContent' style='display:none'>
    <p> Oh, boy! Looks like you've haven't granted permissions. You'll need to accept permissions if you want access...</p>
</div>

<script>

//define what should be done for those who have granted permission
function _aimtellPermissionGranted(){
    document.getElementById('gatedApprovedContent').style.display = 'block';
    document.getElementById('gatedDeniedContent').style.display = 'none'; 
}

//define what should be done for those who have not granted permission
function _aimtellPermissionDenied(){
    document.getElementById('gatedDeniedContent').style.display = 'block'; 
}

//wait till aimtell is fully loaded before running everything
function _aimtellReady(){

     //if they have granted permissions
     if(_aimtellCheckPermissions() == 'granted'){ 
         _aimtellPermissionGranted(); 
     }
     //if they have not granted permissions (or denied it)
     else{ 
       _aimtellPermissionDenied(); 
     }

}

</script>