Skip to main content
MindTouch Success Center

Create a page statistics bar

Written by Theresa Manzo
Product Manager at MindTouch
This page applies to:MindTouch (current)


What is a page statistics bar?


A page statistics bar is a container that exists below your article's content section that displays the total page views, votes, edits, tags, and attachments. By default, this bar displays all pages that are not categories or guides and only to users with some sort of edit permissions on that page.

Desktop view

Screenshot of a page statistics bar

Mobile view

Screenshot of a page statistics bar in mobile size
 

Why should I use a page statistics bar?


The page statistics bar allows for a quick overview of page-relevant data without having to drill into a page or report. With one quick glance, content managers are able to gain actionable insight. The page statistics bar can inform the following:

  • Possible wrong placement. If the page is not often viewed but holds important key information, content managers can decide to move the page to a more prominent location or to link to it more prominently.
  • Low content quality of a page. The vote count in relation to pages views could be an indication that the page may not be as informative as users hoped it to be.
  • Non-adherence to best practice. The edits, tags and attachment counts allow content managers to take action on best practices. Is the page in need of updating? Are there too many tags, too few? Are files attached to the page instead of stored in a media repository?   
     

Prerequisites


How to create a page statistics bar


Step 1: Add the page statistics code to your content footer template

  1. Copy and paste the following code into your custom content header template located at /Template:Custom/Views/ContentFooter.
// Define which article types you don't want this to appear on
var articleType = page.article;
var types = [ 'topic-category', 'topic-guide' ];
var found = true;
foreach(var type in types) {
    if(articleType === type) {
        found = false;
    }
}

// Determine page permission to hide from users without edit permissions
var editor = wiki.pagepermissions();
var userPermission = editor.draft_update;

// If this is the correct article type then display stats
if(found && userPermission) {
    <div class="mt-page-stats">
        <dl class="mt-page-stats-page-views">
            <dt> 'Page views:' </dt>
            <dd> num.format(page.viewcount,'###,###') </dd>
        </dl>
        <dl class="mt-page-stats-votes">    
            <dt> 'Votes:' </dt>
            <dd> page.rating.count </dd>
        </dl>
        <dl class="mt-page-stats-edits">    
            <dt> 'Edits:' </dt>
            <dd> num.format(#page.revisions,'###,###') </dd>
        </dl>
        <dl class="mt-page-stats-tags">    
            <dt> 'Tags:' </dt>
            <dd> num.format(#page.tags,'###,###') </dd>
        </dl>
        <dl class="mt-page-stats-attachments">    
            <dt> 'Attachments:' </dt>
            <dd> num.format(#page.files,'###,###') </dd>
        </dl>
    </div>
}
  1. Save your page.

Step 2: Add your custom CSS

  1. On the MindTouch toolbar, navigate to Site tools > Control panel.
  2. In the control panel, select Branding > Custom Site CSS.
  3. In the All Roles CSS text field, add the following CSS.
/* page statistics bar */
.mt-page-stats {
    background: @highlight-container-background-color;
    border: 1px solid @secondary-container-border-color;
    border-radius: @border-radius-default;
    box-sizing: border-box;
    clear: none;
    color: #666;
    display: inline-block;
    font-size: 80%;
    margin: 1em 0;
    overflow: hidden;
    padding: .25em .8em;
    width: 100%;
}
.mt-page-stats dl {
    display: block;
    float: left;
    line-height: 2;
    margin: 0 0 1em 0;
    padding: 0;
    width: 50%;
    &:before {
        float: left;
        font-family: icomoon;
        margin-right: .5em;
    }
    @media all and (min-width: 25em) {
        width: 50%;
    }
    @media all and (min-width: 37.5em) {
        clear: none;
        display: inline-block;
        margin: 0;
        padding: 0 2em 0 0;
        width: auto;
    }
}
.mt-page-stats dl:last-child {
    border: 0;
    padding-right: 0;
}
.mt-page-stats dt {
    display: block;
    float: left;
    font-weight: bold;
    margin-right: .25em;
}
.mt-page-stats dd {
    display: block;
    float: left;
    line-height: 2;
    margin: 0;
    padding: 0;
}
.mt-page-stats-attachments:before {
    content: '\e81b';
}
.mt-page-stats-edits:before {
    content: '\e819';
    font-size: 115%;
    line-height: 1.8;
}
.mt-page-stats-page-views:before {
    content: '\e67f';
}
.mt-page-stats-tags:before {
    content: '\e637';
}
.mt-page-stats-votes:before {
    content: '\e88a';
    font-size: 115%;
    line-height: 1.8;
}
  1. Click Save.

Step 3: Verify your page statistics bar works

Navigate to your article as a user with edit permissions to see that article's page statistics bar.
 

  • Was this article helpful?