Intégration JS

Comment envoyer des évènements vers Forecast depuis une page web ?

Cette page explique comment envoyer des évènements avec un maximum d’informations vers Forecast Signals depuis une page web à l’aide de Forecast JS.

Prérequis

Avant d’utiliser ses fonctionnalités, Forecast doit être installé et configuré. La page Premiers pas explique comment démarrer avec Forecast.

Configurer la page

Pour enrichir les évènements envoyés, les pages web doivent être correctement configurées.

Propriétés de l’évènement

Pour permettre aux évènements de porter un maximum d’informations, vous devez indiquer les balises HTML décrites ci-dessous dans votre page web.

URL de la page

URL de la page visitée.

<link rel="canonical" href="url">

Type de la page

Type de la page visitée. Valeurs acceptées : article, home, search, search_results.

<script type="text/javascript">
    __forecast.config.pageType = "article"; // ou "home", ou "search", ou "search_results"
</script>

Indique le type de navigation de la page visitée. Les valeurs possibles sont listées ici : https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type.

Attention

Forecast JS calcule automatiquement cette configuration. Nous vous conseillons de ne l’ajuster manuellement que si vous en maîtrisez bien l’impact.

<script type="text/javascript">
  __forecast.config.eventProperties.navigationType = "reload"; // ou "navigate", ou "back_forward"
</script>

Identifiant de l’article

Identifiant Sirius de l’article visité.

<script type="text/javascript">
  __forecast.config.article.globalId = "123abc";
</script>

URL de l’article

URL de l’article visité.

<script type="text/javascript">
  __forecast.config.article.canonicalUrl = "url";
</script>

Conteneur de l’article

Balise du conteneur de l’article visité.

<script type="text/javascript">
  __forecast.config.contentSelector = "selector"; // Sélecteur CSS de l'élément parent du contenu de l'article
</script>

Article débloqué

Pour indiquer si l’article visité est débloqué dans le contexte actuel, vous pouvez définir :

<script type="text/javascript">
  __forecast.config.article.isUnlocked = true; // ou `false`
</script>

Propriétés de l’utilisateur

Pour permettre aux évènements de porter un maximum d’informations concernant l’utilisateur, vous devez indiquer les balises HTML décrites ci-dessous dans votre page web.

Identifiant de l’utilisateur

Identifiant de l’utilisateur.

<script type="text/javascript">
  __forecast.config.user.id = "123abc";
</script>

Statut de l’utilisateur

Pour indiquer si l’utilisateur est un abonné ou pas.

<script type="text/javascript">
  __forecast.config.user.isSubscriber = true; // ou `false`
</script>

Configurer les zones de tracking

Pour assurer le suivi des impressions et des clics sur des zones spécifiques (listes, carrousels, mises en avant), vous devez baliser le HTML avec les attributs décrits ci-dessous. Les identifiants de zones doivent correspondre à ceux définis dans l’administration Sirius.

Identifiant de la zone

L’attribut data-fcst-tz-id définit le conteneur principal de la zone. Renseignez l’identifiant récupéré depuis Sirius.

<div data-fcst-tz-id="">
    <!-- Contenu de la zone -->
</div>

Identifiant des articles de la zone

L’attribut data-fcst-article-id identifie un article au sein d’une zone. Il doit être placé sur un élément enfant de la zone définie par data-fcst-tz-id.

<div data-fcst-tz-id="">
    <article data-fcst-article-id=""></article>
</div>

Déclencheur de clic sur la zone

L’attribut data-fcst-click identifie l’élément qui doit déclencher l’évènement de clic. Plusieurs éléments peuvent être identifiés comme déclencheurs au sein d’une même zone.

Lorsque l’attribut data-fcst-click est placé sur un élément identifié par data-fcst-article-id (ou l’un de ses enfants), l’identifiant de l’article est automatiquement associé au clic.

<div data-fcst-tz-id="">
    <article data-fcst-article-id="">
        <a href="" data-fcst-click>Lien vers l'article</a>
    </article>
    <a href="" data-fcst-click>Voir plus</a>
</div>

Envoyer des évènements

Pour transmettre des évènements vers Forecast Signals, utilisez la fonction sendEvent.

Note

Certains évènements sont transmis automatiquement lors du chargement de Forecast JS, sans nécessiter l’appel à une méthode Javascript spécifique.

`sendEvent(name, properties)`

Permet de transmettre un Hit avec des évènements et propriétés personnalisés.

Syntaxe

__forecast.sendEvent(name, properties);

Paramètres

name

Nom de l’évènement.

properties

Objet acceptant les propriétés suivantes :

eventProperties
- Propriétés de l’évènement. Il est possible de les surcharger différemment en fonction de l’évènement.
userProperties
- Propriétés de l’utilisateur. À date, il n’est pas possible de surcharger les propriétés de l’utilisateur.

Création de compte

L’évènement account_creation doit être envoyé lors de la création d’un compte utilisateur.

Utilisation

__forecast.sendEvent(
    'account_creation',
    {
        eventProperties: {
            source: '',
        },
    }
);

Propriétés

Nom	Type	Description
source	Chaîne de caractères	Source de l’inscription comme `newsletter` ou `apple`.

Consultation d’une page

L’évènement pageview doit être envoyé lors de la consultation d’une page.

Utilisation

__forecast.sendEvent(
    'pageview',
    {
        eventProperties: {
            globalId: 'globalId',
            isArticleUnlocked: false,
            pageType: 'home-fr',
            url: 'https://www.lemonde.fr/',
        },
    }
);

Propriétés

Nom	Type	Description
`globalId`	Chaîne de caractères	L’ID de l’article. Si renseigné, l’événement `pageview` est considéré comme étant dans un contexte d’une page article.
`isArticleUnlocked`	Booléen	`true` si l’utilisateur peut lire l’article en entier, `false` sinon.
`pageType`	Chaîne de caractères	Le type de page.
`url`	Chaîne de caractères	L’URL de la page.

Lecture d’un article

L’évènement read doit être envoyé lors de la lecture d’un article.

Utilisation

__forecast.sendEvent('read');

Commentaire

L’évènement comment doit être envoyé lorsqu’un utilisateur poste un commentaire.

Utilisation

__forecast.sendEvent('comment');

Partage

L’évènement share doit être envoyé lorsqu’un utilisateur partage un contenu.

Utilisation

__forecast.sendEvent('share');

Réception d’un cadeau

L’évènement gift_receive doit être envoyé lors de la réception d’un article offert.

Utilisation

__forecast.sendEvent('gift_receive');

Partage d’un cadeau

L’évènement gift_share doit être envoyé lors du partage d’un article offert.

Utilisation

__forecast.sendEvent('gift_share');

Changement du consentement

L’évènement consent_change doit être envoyé lors d’un changement de consentement.

Utilisation

__forecast.sendEvent(
    'consent_change',
    {
        eventProperties: {
            collect: true,
            ads: true,
            measure: 'optin',
        },
    }
);

Clic sur une publicité

L’évènement ad_click doit être envoyé lors du clic sur une publicité.

Utilisation

__forecast.sendEvent('ad_click');

Survol d’une publicité

L’évènement ad_hover doit être envoyé lors du survol d’une publicité.

Utilisation

__forecast.sendEvent('ad_hover');

Propriétés

Nom	Type	Description
`collect`	Booléen	`true` si le purpose `personalization` de la CMP est accepté, `false` sinon.
`ads`	Booléen	`true` si le purpose `ads` de la CMP est accepté, `false` sinon.
`measure`	Chaîne de caractères	Représente l’état du purpose `analytics` et de `optoutAnalytics`. Voir valeurs possibles.

Valeurs possibles pour `measure`

`optoutAnalytics`	`analytics`	Valeur
`true`	(peu importe)	`"optout"`
`false`	`true`	`"optin"`
`false`	`false`	`"exempt"`

Désactiver des évènements

Pour désactiver l’envoi automatique de certains évènements, vous pouvez définir :

<script type="text/javascript">
  __forecast.config.disabledEvents = [
      'pageview' // désactive l'envoi des évènements de page vue.
      'read' // désactive l'envoi des évènements de lecture.
  ];
</script>

Récupérer des informations

`getReadingMetrics()`

Permet de récupérer un tableau associatif des métriques de lecture par sélecteur.

Syntaxe

__forecast.getReadingMetrics();

Valeur de retour

Un tableau associatif des métriques de lecture par sélecteur.

{
  '.article__content': {
    rate: 45.96,
    time: 7,
    startTime: '2026-05-19T12:31:02.784Z',
    endTime: '2026-05-19T12:31:18.821Z',
  },
}

Intégration JS

Configurer la page

Propriétés de l’évènement

URL de la page

Type de la page

Type de navigation de la page

Identifiant de l’article

URL de l’article

Conteneur de l’article

Article débloqué

Propriétés de l’utilisateur

Identifiant de l’utilisateur

Statut de l’utilisateur

Configurer les zones de tracking

Identifiant de la zone

Identifiant des articles de la zone

Déclencheur de clic sur la zone

Envoyer des évènements

sendEvent(name, properties)

Syntaxe

Paramètres

Création de compte

Utilisation

Propriétés

Consultation d’une page

Utilisation

Propriétés

Lecture d’un article

Utilisation

Commentaire

Utilisation

Partage

Utilisation

Réception d’un cadeau

Utilisation

Partage d’un cadeau

Utilisation

Changement du consentement

Utilisation

Clic sur une publicité

Utilisation

Survol d’une publicité

Utilisation

Propriétés

Valeurs possibles pour measure

Désactiver des évènements

Récupérer des informations

getReadingMetrics()

Syntaxe

Valeur de retour

`sendEvent(name, properties)`

Valeurs possibles pour `measure`

`getReadingMetrics()`