Integrating with Marketing Factory

  Written by The Jahia Team
 
Developers
   Estimated reading time:

To become a bit more familiar with  Marketing Factory (MF) and gain some technical knowledge you can visit MF’s academy page.

There are two main ingredients to our integration with MF: commerce-io-front-end module and commerce-io-mf-bridge module.

The latter is responsible for sending of events to MF while the former registers conditions by extending MF.

Event types

Commerce I/O sends several events to MF in order to store information about important user activities.

  • CommerceIOViewEvent applies to page/product views and depending on context it will either have information on the product or on the context such as brand or category.
  • CommerceIOAddToCart event sends information about a product added to cart.
  • CommerceIOProductsPurchased event sends information about checkout along with a list of skus in cart and relevant product data.

Sending events

To send events top MF we rely on MF api accessible from wem object which MF injects on the window. We are careful to make sure that event can be sent before sending it and there is also a time out of 500ms in order to prevent long waits. You can find more details in /src/main/javascript/mf/mfintegration.js, a sample event model is included at the top of the file. The processEvent() function is triggered from React components but some events are sent via a different mechanism.

As noted earlier, on the product page a script is injected by the SEO filter, that script includes an event listener for the checkout button. You can look at SEO filter for more details. To be able to attach an event to the button which actually comes from SAP Hybris fragment we had to mark it with class “js-add-to-cart”. When the button is clicked a function similar to processEvent() is executed. Almost identical mechanism is used for checkout when user is redirected to the “order” page.

Conditions building

Building conditions is very simple and in most cases involves copying, renaming and adapting existing condition. Note that conditions follow a very strict naming policy and you should keep your condition in line with what was created in commerce-io-mf-bridge module.

There are three main ingredients for conditions: angular controller, condition JSON file and resource bundle.

Angular controllers are placed inside /src/main/javascript/marketing-factory/common/angular/conditions folder.

Remember to follow naming exactly as shown in examples.

For an example of single value condition look at condition-productViewEventCondition.controller.js and for example of a multi value condition look at condition-categoryViewEventCondition.controller.js. Depending on what type of condition you need these two would be a good starting point.

Condition json files are placed inside /src/main/resources/META-INF/marketing-factory/conditions folder and provide the rules that will be used by UNOMI to evaluate these conditions. Once again strict naming rules apply. One of the key things to note is that propertyName points at value in your event object and propertyValue points at parameter that you specify/set in your controller.

In order to see your condition in edit mode you need to name it. This can be done simply by providing an appropriate resource key in /src/main/resources/resources.

Once again strict naming convention applies, at least for the name part so make sure to keep it similar to everything else in the file.

Once you create your condition redeploy your module, in this case  and your condition should commerce-io-mf-bridge be visible.