Marfeel Docs

# Next page providers

The Next Articles Preview is just one of the multiple features the Marfeel solution provides that encourages the recirculation of users, helping to dramatically reduce the bounce rate. The feature itself displays:

  • The next articles of the same section
  • Two sets of sliding tiles with the articles from the previous and the next sections.

This extraction is done with Boilerpile with next page providers using Tenant's html attributes or with a custom implementation.

# Attributes next page provider

To use a next page provider with attributes it's necessary to use AttributesNextPageDetector following these steps:

  1. Add the path of to AttributesNextPageDetector file in the providers.json:

providers.json file must be in the Tenant's root folder in the site code repository.

{
    "nextPages":{
        "/marfeel/providers/main/nextPages/AttributesNextPageDetector.js": ["class", ["next-post", "btn-next"]],
    }
}

This will include a nextPageDetectors to your tenant: AttributesNextPageDetector.

AttributesNextPageDetector is a core NextPageDetector.

This is the same implementation that we had in Java by the same name. The list after the path is the Constructor parameters. This specific NextPageDetector will search for an A element with the class next-post or btn-next and mark them as next page candidates.

  1. To run a test for this provider follow the instruction about how to test a provider.

# Implementation examples with attributes

# Custom next page provider

To create a custom next page provider it's necessary to use CustomNextPageDetector following these steps:

{
    "nextPages":{
        "/www.tenant.com/provider/nextPages/CustomNextPageDetector.js": []
    }
}

This will include a NextPageDetectors to your tenant: CustomNextPageDetector.

TIP

You can import NextPageDetectors from other tenants but if it's too common, the NextPage should be in core.

  1. Write a javascript class with all the required behavior, following this structure.

The file must be in under www.tenant.com/providers/main/nextPages/ in the site code repository.

var AttributesNextPageDetector = function(arguments) {
   this.attributeName = arguments[0];
   this.attributesValues = [];

   arguments[1].forEach(function(value) {
      this.attributesValues.push(value);
   }.bind(this));
};

AttributesNextPageDetector.prototype = {
    attributeName : null,
    attributesValues : null,

    isNextPage: function(currentUri, attributes, instance) {
        var href = attributes.getValue("href"),
            nextPageAttributeValue = attributes.getValue(this.attributeName);

        return href != null && this.containsClass(this.attributesValues, nextPageAttributeValue);
    },

    getLink: function(currentUri, attributes, instance) {
        return attributes.getValue("data-href");
    },

    // ---------------------------------
    // Private functions
    // ---------------------------------
    containsClass : function(attributes, nextPageAttributeValue){
        if(nextPageAttributeValue != null) {
            for(var i = 0; i < attributes.length; i++) {
                if(nextPageAttributeValue.contains(attributes[i])){
                    return true;
                }
            }
        }

        return false;
   }
};
  • Constructor function: Receives an array with the attributes you set up in the providers.json.
  • isNextPage: Receives a URI, Attributes, and DocumentParser as a parameter.

Java Classes

Remember that these are Java classes so they should be treated like that.

  • getLink: Receives the same parameters as isNextPage but it's an optional one. As a default behavior, it will read the attribute href.
  • containsClass: is an auxiliary function only for developer functions.
  1. To run a test for this provider follow the instruction about how to test a provider.

# Custom mplementation examples