Afficher des Widgets

Comment afficher des Widgets Forecast ?

Cette page explique comment afficher des Widgets Forecast dans vos pages web.

Les récents articles de la même rubrique

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

// Si ce n'est pas déjà le cas, initialisez l'objet de configuration
window.__forecast.config = window.__forecast.config || {};

// Si ce n'est pas déjà le cas, initialisez le tableau des widgets
window.__forecast.config.widgets = window.__forecast.config.widgets || [];

// Ajoutez un nouveau widget
window.__forecast.config.widgets.push({
    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 configuration ci-dessous permet d’afficher un widget contenant les meilleurs articles :

// Si ce n'est pas déjà le cas, initialisez l'objet de configuration
window.__forecast.config = window.__forecast.config || {};

// Si ce n'est pas déjà le cas, initialisez le tableau des widgets
window.__forecast.config.widgets = window.__forecast.config.widgets || [];

// Ajoutez un nouveau widget
window.__forecast.config.widgets.push({
    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 configuration ci-dessous permet d’afficher un widget contenant les meilleurs articles lus à la suite de l’article actuellement visité :

// Si ce n'est pas déjà le cas, initialisez l'objet de configuration
window.__forecast.config = window.__forecast.config || {};

// Si ce n'est pas déjà le cas, initialisez le tableau des widgets
window.__forecast.config.widgets = window.__forecast.config.widgets || [];

// Ajoutez un nouveau widget
window.__forecast.config.widgets.push({
    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,
    },
});

Les meilleurs articles pour le visiteur

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

// Si ce n'est pas déjà le cas, initialisez l'objet de configuration
window.__forecast.config = window.__forecast.config || {};

// Si ce n'est pas déjà le cas, initialisez le tableau des widgets
window.__forecast.config.widgets = window.__forecast.config.widgets || [];

// Ajoutez un nouveau widget
window.__forecast.config.widgets.push({
    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',
    passLead: true,
    options: {
        type: 'user-based-cf-edito',
        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 déclencher un hit indiquant que le visiteur a accédé au tunnel d’abonnement.

Grâce à ce hit, Forecast pourra déterminer la date à laquelle le visiteur a accédé au tunnel d’abonnement. De plus, si le hit 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 hit 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.

Configuration du widget

Après avoir déclenché le hit d’accès au tunnel d’abonnement, il est nécessaire de configurer un widget sur votre site pour qu’il s’affiche auprès des visiteurs ayant accédé au tunnel d’abonnement. La configuration ci-dessous vous permettra d’atteindre ce but :

// Si ce n'est pas déjà le cas, initialisez l'objet de configuration
window.__forecast.config = window.__forecast.config || {};

// Si ce n'est pas déjà le cas, initialisez le tableau des widgets
window.__forecast.config.widgets = window.__forecast.config.widgets || [];

// Ajoutez un nouveau widget
window.__forecast.config.widgets.push({
    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é :

// Si ce n'est pas déjà le cas, initialisez l'objet de configuration
window.__forecast.config = window.__forecast.config || {};

// Si ce n'est pas déjà le cas, initialisez le tableau des widgets
window.__forecast.config.widgets = window.__forecast.config.widgets || [];

// Ajoutez un nouveau widget
window.__forecast.config.widgets.push({
    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 la configuration 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.

// Si ce n'est pas déjà le cas, initialisez l'objet de configuration
window.__forecast.config = window.__forecast.config || {};

// Si ce n'est pas déjà le cas, initialisez le tableau des widgets
window.__forecast.config.widgets = window.__forecast.config.widgets || [];

// Ajoutez un nouveau widget avec failovers
window.__forecast.config.widgets.push({
    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.