Whitelist and Blacklist

To deliver a clean, organic, and fluid UX that captivates readers and drives engagement to maximize ad revenue, Marfeel filters the extraneous elements from a publisher's article on their desktop site, and optimizes it for their Marfeel Progressive WebApp (PWA).

Boilerpipe is the clever algorithm that Marfeel engineered to parse a customer's articles. The whitelist and blacklist are what direct Boilerpipe to omit or extract the elements to be replicated in a publisher's Marfeelized mobile site to deliver an enhanced UX that boosts engagement.

The elements in both are identified by Marfeel when developing a customer's Marfeel PWA to optimize UX, however they can always be configured and modified according to customer request.

Both the whitelist and blacklist are defined in a tenant's definition.json inside "configuration".

"whitelist":"elements_to_include"
"blacklist":"elements_to_remove"

CODE

The elements themselves can be classes, ids, or HTML tags. In the case of HTML tags, they have to all be in capital letters.

They are listed without any class or id mark (. or #) and separated by a comma without a space.

[attribute=anyData]

CODE

Adding "==" to the beginning of a class will either blacklist or whitelist the elements that only have that specific item. Elements that have the same class besides others will not be affected. For example, if we had these two elements:

Element 1: <div class=“a”>A</div>
Element 2: <div class “a b c”>A B C</div>

The following line would only remove the first element because the second one has more classes other than “a”:

"blacklist":"==a"

CODE

Blacklist has priority over whitelist by default. Therefore, if the same selector is both blacklisted and whitelisted, it won’t show. To reverse this behavior in very specific cases where this may be needed, the “greedyWhitelist” flag can be added. This affects the entire whitelist and it is placed under “configuration” in the definition.json file:

"greedyWhitelist":true

CODE

Whitelist

Whitelist identifies elements or characteristics for Boilerpipe to extract and use within the Marfeel mobile website.

Examples might include author name, publishing date, etc.

"whitelist":"em fc-g,[href=/author/],slideshow-subtitle,article-full-picture,player,cover-img,[itemprop=datePublished],[href*=author],slideshow-thumbs,img-credits,H3",

JS

Blacklist

Blacklist identifies the elements or characteristics that a Marfeel PWA replicates from a publisher's desktop site.

Defined items might include a publisher's sharing bar, which would be excluded because the Marfeel solution provides a native auto-hiding social sharing bar. The Marfeel social sharing bar promotes readability and optimizes the space available while encouraging sharing on the reader's social networks.

"blacklist":"desktop-footer,==off-phones,article-bottom-blocks-comment-layout-cell-sidebar,OUTBRAIN,term-name-description,[itemprop=logo],mobile-incontent,element-hidden,horizontal-share-menu,H3",

JS

Image Gallery Blacklist

The following can be inserted in configuration of definition.json to prevent an image from being processed as an image. It is instead treated as part of the article's textual content. This is especially useful for images under tags such as buttons.

"configuration":{
"galleryBlackList":".author img,[src*='gravatar']"
}

CODE

Collapsed Gallery Blacklist

The following can be inserted in configuration of definition.json to prevent an image from being part of a collapsed gallery. This is especially useful for small images as the author avatar:

"configuration":{
"collapsableGalleriesBlacklist": "#artist-heads img",
}

CODE

Next page whitelist and blacklist

The next page whitelist and blacklist define the elements to include or omit from subsequent pages of an article:

"nextPageWhitelist":"next_pages_elements_to_include"
"nextPageBlacklist":"next_pages_elements_to_remove",

CODE