Recommandation de média intéractif

Les balises et appels d’API suivants doivent être configurés sur la page que vous souhaitez afficher le modèle de recommandation pour les médias riches.

  1. Dans l’en-tête de page

    1. Installation de la balise RTP
    2. Ajouter l’appel de GET à la page pour renseigner les recommandations
    3. Ajouter l’appel SET pour configurer le modèle
  2. Dans le corps de page

    1. Placez la balise de modèle (classe div) à l’emplacement où vous souhaitez que le modèle s’affiche.

Plus d’informations disponibles here.

Balise de modèle

Attribut
Facultatif/Obligatoire
Description
Classe
Requis
Indiquez que cet élément de HTML div est la balise div de recommandation RTP.
data-rtp-template-id
Requis
Identifiant du modèle. Cela détermine l’alignement de votre recommandation. Utilisez "template1" pour l’alignement horizontal, "template2" pour l’alignement vertical ou "template3" pour l’alignement vertical qui ne comprend que le titre et la description. Le script injecte le modèle correspondant dans celui-ci. div.Permissible valeurs : template1, template2, template3.

Exemples

Pour afficher vos recommandations en alignement horizontal, utilisez "template1".

<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>

Pour afficher vos recommandations en alignement vertical, utilisez "template2".

<div class="RTP_RCMD2" data-rtp-template-id="template2"></div>

Pour afficher vos recommandations en alignement vertical avec le titre et la description uniquement, utilisez "template3".

<div class="RTP_RCMD2" data-rtp-template-id="template3"></div>

Voir les captures d’écran des alignements de modèles here.

Renseigner la recommandation

Cette méthode renseigne tous les médias riches. <divs> sur la page contenant des recommandations.

Utilisation

rtp('get', 'rcmd', 'richmedia');

Paramètre
Facultatif/Obligatoire
Type
Description
'get'
Requis
Chaîne
Action de méthode.
'rcmd'
Requis
Chaîne
Nom de la méthode.
'richmedia'
Requis
Chaîne
Nom de la sous-méthode.

Modifier la configuration des modèles

Cette méthode modifie la configuration par défaut du modèle.

Remarque : Lorsque vous utilisez cette méthode, elle doit être appelée avant d’appeler rtp('get','rcmd', 'richmedia');

Utilisation

rtp('set', 'rcmd', 'richmedia', 'template_id', conf_obj);

Paramètre
Facultatif/Obligatoire
Type
Description
'set'
Requis
Chaîne
Action de méthode.
'rcmd'
Requis
Chaîne
Nom de la méthode.
'richmedia'
Requis
Chaîne
Nom de la sous-méthode.
template_id
En option
Chaîne
ID de modèle pour les modifications de configuration. Utilisez pour spécifier la modification des paramètres d’un seul modèle.
conf_obj
Requis
Objet
Nouvelle configuration. L’objet contient toutes les configurations en tant que paire clé/valeur.

Exemples

Ce fragment de code modifie le texte du titre d’un modèle.

rtp("set", "rcmd", "richmedia","template1",
    {
        "rcmd.title.text": "RECOMMENDED CONTENT"
    }
);

Ce fragment de code affiche la définition de catégories avec plusieurs configurations pour un modèle.

rtp("set", "rcmd", "richmedia",
    {
        "template1":
        {
            "rcmd.title.text": "RECOMMENDED CONTENT",
            "rcmd.general.font.family": "arial",
            "category":
            [
                "webinar",
                "blog posts",
                "pricing_page_category",
                "product_a_category"
            ]
        }
    }
);

REMARQUE : utilisez "catégorie" pour filtrer le contenu affiché dans le résultat des recommandations de contenu prédictif. Pour appliquer du contenu prédictif à tous les éléments de contenu activés, laissez la "catégorie" vide. Si vous souhaitez recommander uniquement du contenu spécifique pour la sortie dans le modèle Média enrichi, ajoutez une catégorie pour le contenu dans la page Définir le contenu et associez cette catégorie au code du modèle de recommandation. Catégorisation du contenu pertinent en fonction des sections de votre site web (produits ou solutions).

Ce fragment de code affiche la définition de plusieurs configurations de modèle pour un modèle.

rtp("set", "rcmd", "richmedia",
    {
        "template1":
        {
            "rcmd.title.text": "RECOMMENDED CONTENT",
            "rcmd.general.font.family": "arial"
        }
    }
);

Propriétés de configuration

Configuration
Exemple
Description
rcmd.general.font.family
"rcmd.general.font.family" : "arial"
Modifie la famille de polices pour tout le texte du modèle. Cette propriété prend en charge toutes les valeurs CSS par type de navigateur. Il est possible d’utiliser une famille de polices personnalisée si elle existe sur la page.
rcmd.content.background.color
"rcmd.content.background.color" : "noir"
Modifie la couleur d’arrière-plan des zones intérieures du modèle. Cette propriété prend en charge toutes les valeurs CSS par type de navigateur.
rcmd.title.text
"rcmd.title.text" : "CONTENU RECOMMANDÉ"
Modifie le titre du modèle.
rcmd.title.background.color
"rcmd.title.background.color" : "blue"
Modifie la couleur d’arrière-plan de la zone de titre. Cette propriété prend en charge toutes les valeurs de couleur CSS (nom de couleur, rgb, etc.).
rcmd.title.font.size
"rcmd.title.font.size" : "26px"
Modifie la taille de police du titre. La propriété prend en charge toutes les valeurs CSS de taille de police possibles (px, em, etc.).
rcmd.title.font.color
"rcmd.title.font.color" : "blanc"
Modifie la couleur de police du titre. Cette propriété prend en charge toutes les valeurs de couleur de police (rgb, hex, etc.).
rcmd.description.font.color
"rcmd.description.font.color" : "blanc"
Modifie la couleur de la police de description. Cette propriété prend en charge toutes les valeurs de couleur de police (rgb, hex, etc.).
rcmd.cta.background.color
"rcmd.cta.background.color" : "vert"
Modifie la couleur d’arrière-plan du bouton. Cette propriété prend en charge toutes les valeurs de couleur CSS (nom de couleur, rgb, etc.).
rcmd.cta.font.color
"rcmd.cta.font.color" : "rgb(90, 84, 164)"
Modifie la couleur de la police du bouton. Cette propriété prend en charge toutes les valeurs de couleur de police (rgb, hex, etc.).
rcmd.cta.text
"rcmd.cta.text" : "Push"
Modifie le texte du bouton. Le texte est le même pour tous les boutons.
Catégorie
"category" : ["une catégorie"]
Modifie la catégorie de recommandations prise en charge par ce modèle. Le modèle affiche uniquement les recommandations avec l’une des catégories définies par cette configuration.

Remarque : La prise en charge de la configuration peut changer par modèle.

Exemple de base

Cet exemple comporte un modèle avec trois recommandations. Copiez cet exemple dans une page de HTML, puis remplacez la balise RTP par votre balise .

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RTP recommendation</title>
<!-- RTP tag -->
<script type='text/javascript'>

// This tag needs to be replaced with your account tag
(function(c,h,a,f,i,e){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
c[a].a=i;c[a].e=e;var g=h.createElement("script");g.async=true;g.type="text/javascript";
g.src=f+'?aid='+i;var b=h.getElementsByTagName("script")[0];b.parentNode.insertBefore(g,b);
})(window,document,"rtp","//example.rtp.com/rtp-api/v1/rtp.js","account_id");

// Send page view (required by  the recommendation)
rtp('send','view');
// Populate recommendation
rtp('get','rcmd', 'richmedia');
</script>
<!-- End of RTP tag -->
</head>
<body>
<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>
</body>
</html>

Exemple avancé

Cet exemple comporte un modèle avec trois recommandations. Le titre du modèle est "CONTENU RECOMMANDÉ" et le texte du bouton est "En savoir plus". Copiez cet exemple dans une page de HTML, puis remplacez la balise RTP par votre balise .

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RTP recommendation</title>
<!-- RTP tag -->
<script type='text/javascript'>

// This tag needs to be replaced with your account tag
(function(c,h,a,f,i,e){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
c[a].a=i;c[a].e=e;var g=h.createElement("script");g.async=true;g.type="text/javascript";
g.src=f+'?aid='+i;var b=h.getElementsByTagName("script")[0];b.parentNode.insertBefore(g,b);
})(window,document,"rtp","//example.rtp.com/rtp-api/v1/rtp.js","account_id");

// Send page view (required by  the recommendation)
rtp('send','view');
// Populate the recommendation zone
rtp('get', 'campaign',true);
// Change template configuration
rtp('set', 'rcmd', 'richmedia',
    {
        template1 :
        {
            "rcmd.title.text" : "RECOMMENDED CONTENT",
            "rcmd.cta.text" : "Read More"
        }
    }
);
// Populate recommendation
rtp('get','rcmd', 'richmedia');
</script>
<!-- End of RTP tag -->
</head>
<body>
<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>
</body>
</html>

Exemple de #1 de modèle de recommandation pour les médias riches

Nom: template1 Description: contenu horizontal comprenant l’image, le titre et la description et bouton d’appel à l’action.

Modèle de média enrichi

Exemple de #2 de modèle de recommandation pour les médias riches

Nom: template2 Description: contenu vertical comprenant l’image, le titre et la description et bouton d’appel à l’action.

Modèle de média enrichi

Exemple de #3 de modèle de recommandation pour les médias riches

Nom: template3 Description: contenu vertical comprenant uniquement le titre et la description. Lorsque vous pointez avec la souris, l’en-tête change de couleur et est lié à l’URL du contenu. La description est également liée au contenu sans changement de couleur. Modèle de média enrichi

recommendation-more-help
bb269a6d-047a-4bf7-9acd-23ad9a63dc59