• orchestrates onward journey components (better promo, newsletters, etc)

https://docs.google.com/document/d/1nJKG7-xOzZyhKTmJMz9M2FA9P-AQgOVPZD1F_MmX3o4/edit

• https://toggler.ft.com/#showEventPromo
• https://toggler.ft.com/#newsletterSignupOnArticle

• https://github.com/Financial-Times/next-magnet-api
• https://github.com/Financial-Times/n-eventpromo

npm install @financial-times/n-magnet

Some configuration variable can be overridden using ENV variables.

The component expects some elements to be present in the DOM

• .js-magnet-cta': required, the component will be loaded in this element
• .js-magnet-data : optional, should contain a json object with the conceptIds used by the article

<script class="js-magnet-data" type="application/json">
  {{{json articleMainConcepts}}}
</script>
<div class="magnet-cta js-magnet-cta" data-trackable="magnet-cta"></div>

• call init() from n-magnet

import * as magnet from '@financial-times/n-magnet';

magnet
  .init({ oTracking, flags })
  .then(() => {
    // Do something after the component is loaded
  })
  .catch((error) => {
    // fail silently
    // eslint-disable-next-line no-console
    console.debug('failed to init magnet', error);
  });

npm install
npm run build
npm start

You can then visit local demonstration pages:

• eventpromo-demo
• newsletter-demo