To empower publishers with a revolutionary Marfeel Progressive WebApp (PWA) that maximizes engagement and ad revenue through an optimized UX and sophisticated ad setup, Marfeel engineers perform specific steps to deliver a unique product to every customer that embodies their brand. 

The following are the 11 steps Marfeel engineers perform when developing a Marfeel PWA for a new customer:

1 - Marfeelizable check

Ensure that the publisher's desktop website can beMarfeelizedand optimized throughMarfeel'sproprietary technology, according to defined criteria. 

For complete details on the requirements of a Marfeelizable site, see the Marfeelizable Criteria article. 

In addition, be sure that the Tomcat server is running.

2 - Determine site size

Depending on the visits a publisher receives a month, their Marfeel PWA is built in different projects. 

Larger publications or bigger media groups are built in GoLivePro, whereas smaller sites are built in GoLiveAlice.

Be sure to:

  1. Change the development environment in Gutenberg where necessary.
  2. Review the publication size using SimilarWeb and receive all necessary information from the Strategic Partnership Executive or Manager.

3 - Create Tenant Folder

  1. Open the Panoramix Plugin.
  2. Clean the stored data and enter all the required data and sections. Pay close attention to section names and the correct spelling of each relevant item. The colors and logo that reinforce a customer's unique brand are not relevant in this phase and will be addressed by the Marfeel Design team at a later point.
  3. Folders can also be inserted manually. Copy the template folder from the following path: ./ProTenants/Tenants/ or ./AliceTenants/Tenants/ into the corresponding repository.
  4. Replace all default empty ("www.example.com") fields in publisher.json and definition.json with the actual data. 

4 - Tenant language

Change the Marfeel interface text in definition.json:

"userInterface":{
    "lang":"en"
}
CODE

 

5 - definition.json

Ensure that all sections and links are correct and operative. For more information, see the definition.json article. 

6 - WhiteCollar

  1. Add the selectors (HTML5 tags, classes, or ids) for the articles container in:

    getItems: function () {
    return document.querySelectorAll('<Selectors>');
},
    CODE
  2. Fill in the selectors for the article's data. The minimum required fields are the title and uri. All other parameters can be omitted (media, subtitle, author, date, and excerpt). Also, remove 'if(item.parameter){}' of deleted parameters.
  3. Look for static content in the tenant section and at it to their marfeel version. This article explain how to do it: https://marfeel.atlassian.net/wiki/spaces/PRODUCT/pages/2072068264

For more information, see the WhiteCollar and WhiteCollar 2.0 articles.

7 - Extract content and load tenant

  1. Run Freud and check the content.
  2. Apply the whitelist and blacklist and detected issues.

  3. In the console, navigate to the tenant folder and run:

    mrf-def -ct //extract new Tenant
mrf-def     //extract already extracted Tenants
    CODE

  4. Compile *.scss and *.js.Issue:

    Jinks  //compile all
Jinks -css -ccss -js  //exclude .css and .js, its faster
Jinks -wjs s -mi// watch device without dependencies
Jinks -ccjs -js -k -mi // do not compile js neither k nor dependencies == only styles
    CODE

  5. Load tenant locally:

    http://localhost.marfeel.com/<TenantName>/index.html?marfeelgarda=off&marfeeldev=true
    CODE

8 - Check articles

Inspect the selected articles with the WhiteCollar, ensuring that the local display and content matches. If not, revise the WhiteCollar selectors for the articles, and the whitelist and blacklist for the displayed content. 

9 - Add metrics

  1. Search in the source code for the tenant's analytics providers. 
  2. Ensure with Charles that the metric's code is used. The metrics Marfeel supports, their formatting, and usage are listed in the GoLive Resources. 
  3. Add metrics in the following path: ./index/src/js/main.js.

10 - Final checks

Ensure that the following are working correctly:

11 - Deploy tenant

  1. Commit and push the tenant's file to git. 
  2. Add a descriptive commit text containing the following:
    1. JIRA Issue Code
    2. Tenanturi
    3. New Tenant
    4. Description of any custom development. 
  3. Upload it in Jenkins to the appropriate environment and perform a definition PUT.