Intégration JS

Comment afficher des Widgets Forecast ?

Cette page explique comment afficher des Widgets Forecast — qui sont des blocs HTML — dans vos pages web.

Les récents articles de la même rubrique

Lorsqu’elle est appelée, la fonction ci-dessous permet d’afficher un widget contenant les récents articles de la même rubrique que l’article visité :

window.__forecast.createWidget({
    targetSelector: '#recirculation', // sélecteur CSS de l'élément HTML à l'intérieur duquel le widget sera chargé
    name: 'identifiant_unique_du_widget_pour_faciliter_le_suivi', // par exemple : 'recirculation_same_section'
    template: 'recommendations',
    passUrl: true,
    options: {
        skin: 'same_section', // ou 'read_also' pour modifier le rendu du widget
        type: 'last-in-same-section-articles',
        itemNumber: 3,
    },
});

Les meilleurs articles

Lorsqu’elle est appelée, la fonction ci-dessous permet d’afficher un widget contenant les meilleurs articles :

window.__forecast.createWidget({
    targetSelector: '#recirculation-for-nonsubscriber', // sélecteur CSS de l'élément HTML à l'intérieur duquel le widget sera chargé
    name: 'identifiant_unique_du_widget_pour_faciliter_le_suivi', // par exemple : 'recirculation_for_nonsubscriber'
    template: 'recommendations',
    passUrl: true,
    options: {
        skin: 'same_section', // ou 'subscriber_read_also' pour modifier le rendu du widget
        type: 'weighted-top-articles', // ou 'weighted-top-premium-articles' pour obtenir que des articles premium
        itemNumber: 3,
        section: 'Rubrique à recommander', // optionnel, par exemple : 'Sport'
    },
});

Les meilleurs articles suivants

Lorsqu’elle est appelée, la fonction ci-dessous permet d’afficher un widget contenant les meilleurs articles lus à la suite de l’article actuellement visité :

window.__forecast.createWidget({
    targetSelector: '#recirculation-for-nonsubscriber', // sélecteur CSS de l'élément HTML à l'intérieur duquel le widget sera chargé
    name: 'identifiant_unique_du_widget_pour_faciliter_le_suivi', // par exemple : 'recirculation_for_nonsubscriber'
    template: 'recommendations',
    passUrl: true,
    options: {
        skin: 'identifiant_du_rendu', // optionnel, permet de modifier le rendu du widget
        type: 'weighted-top-next-articles', // ou 'weighted-top-next-premium-articles' pour obtenir que des articles premium
        itemNumber: 3,
    },
});

Reciblage des abandonnistes

Ce tutoriel explique comment mettre en place le widget de reciblage pour les visiteurs ayant abandonné un tunnel d’abonnement sur votre site web. Suivez les instructions ci-dessous pour implémenter ce type de widget.

Préparation du reciblage

Pour commencer, vous devez utiliser la méthode collectTunnelAccess(page, formula, minutesAgo) afin de transmettre un évènement indiquant que le visiteur a accédé au tunnel d’abonnement.

Grâce à cet évènement, Forecast pourra déterminer la date à laquelle le visiteur a accédé au tunnel d’abonnement. De plus, si l’évènement inclut cette information, Forecast pourra identifier l’abonnement qui a captivé l’intérêt du visiteur. Ces informations seront ensuite utilisées pour un affichage personnalisé du widget de reciblage.

Notez que si un événement de conversion est déclenché pour un visiteur, celui-ci n’est plus considéré comme ayant abandonné le processus d’abonnement. Dans ce cas, le widget de reciblage ne lui sera plus affiché.

Consultez la documentation dédiée à la méthode collectTunnelAccess(page, formula, minutesAgo) pour en savoir plus sur ses paramètres et son fonctionnement.

Affichage du widget

Après avoir déclenché le hit d’accès au tunnel d’abonnement, il est nécessaire de créer un widget sur votre site pour qu’il s’affiche auprès des visiteurs ayant accédé au tunnel d’abonnement :

window.__forecast.createWidget({
    targetSelector: '#retargeting-banner', // sélecteur CSS de l'élément HTML à l'intérieur duquel le widget sera chargé
    name: 'identifiant_unique_du_widget_pour_faciliter_le_suivi', // par exemple : 'retargeting_banner'
    type: 'retargeting',
    template: 'retargeting',
    expire: 7*24*60*60, // délai d'expiration du widget en secondes, après le déclenchement du hit d'accès au tunnel d'abonnement
    capping: 10, // nombre maximal d'affichages du widget durant la session d'un visiteur
    options: {
        // facultatif, ajoutez des paires clé-valeur pour les transmettre au modèle de rendu
    },
});

A/B tester un widget

Pour A/B tester un widget, vous devez déclarer ses différentes versions possibles sous la propriété versions de sa configuration.

Voici un exemple d’un widget a/b testé :

window.__forecast.createWidget({
    targetSelector: '#recirculation',
    name: 'identifiant_unique_du_widget_pour_faciliter_le_suivi',
    versions: {
        type: 'abtest',
        items: [
            {
                rate: 50,
                template: 'recommendations',
                passUrl: true,
                options: {
                    skin: 'identifiant_du_rendu',
                    type: 'weighted-top-articles', // <= version A
                    itemNumber: 3,
                },
            },
            {
                rate: 50,
                template: 'recommendations',
                passUrl: true,
                options: {
                    skin: 'identifiant_du_rendu',
                    type: 'weighted-top-next-articles', // <= version B
                    itemNumber: 3,
                },
            },
        ],
    },
});

Configurer des widgets de repli

Lors de l’affichage des widgets, il est possible qu’un widget spécifique ne parvienne pas à charger ou à afficher des données. Dans de tels scénarios, pour assurer une expérience utilisateur continue, vous pouvez définir des configurations de repli pour les widgets à l’aide de la propriété failovers.

Les failovers sont essentiellement des configurations de widget alternatives qui seront utilisées en cas d’échec du widget principal.

Pour obtenir des informations détaillées sur la configuration des widgets, veuillez consulter la documentation de configuration.

Comment utiliser failovers ?

Chaque entrée dans la liste failovers est une configuration de widget valide. Si le widget principal échoue, le premier widget de repli est essayé, puis le deuxième, et ainsi de suite, jusqu’à ce qu’un widget réussisse ou que la liste soit épuisée.

Notez que le targetSelector du widget parent est hérité par les widgets de repli. Les configurations de repli n’écrasent pas la valeur du targetSelector du parent.

window.__forecast.createWidget({
    targetSelector: '#recirculation',
    name: 'identifiant_unique_du_widget_pour_faciliter_le_suivi',
    template: 'recommendations',
    passUrl: true,
    options: {
        skin: 'identifiant_du_rendu',
        type: 'weighted-top-articles',
        itemNumber: 3,
    },
    failovers: [
        {
            name: 'failover_widget_1',
            template: 'failover_template_1',
            passUrl: true,
            options: {
                // Configuration spécifique du premier widget de repli
            },
        },
        {
            name: 'failover_widget_2',
            template: 'failover_template_2',
            passUrl: true,
            options: {
                // Configuration spécifique du deuxième widget de repli
            },
        }
        // ... ajoutez autant de configurations de repli que nécessaire
    ]
});

Dans l’exemple ci-dessus, si le widget principal échoue, failover_widget_1 est essayé en premier. Si failover_widget_1 échoue également, alors failover_widget_2 est essayé, et ainsi de suite.