Recommandation de média intéractif
Pour afficher un modèle de recommandation de média enrichi, ajoutez les balises et les appels d’API requis à la page.
-
Dans l’en-tête de la page :
- Installez la balise RTP.
- Ajoutez l’appel GET qui renseigne les recommandations.
- Ajoutez l’appel SET qui configure le modèle.
-
Dans le corps de la page :
- Placez la balise de modèle (classe div) à l’endroit où vous souhaitez que le modèle apparaisse.
Pour plus d’informations, voir Activer le contenu prédictif pour les médias riches en contenu web.
Balise de modèle
div. Valeurs autorisées : template1, template2, template3.Exemples
Utilisez « template1 » pour afficher les recommandations horizontalement.
<div class="RTP_RCMD2" data-rtp-template-id="template1"></div>
Utilisez « template2 » pour afficher des recommandations verticalement.
<div class="RTP_RCMD2" data-rtp-template-id="template2"></div>
Utilisez « template3 » pour afficher des recommandations verticalement avec uniquement un titre et une description.
<div class="RTP_RCMD2" data-rtp-template-id="template3"></div>
Voir les exemples d’alignement des modèles.
Renseigner la recommandation
Cette méthode renseigne toutes les <divs> de médias riches de la page avec des recommandations.
Utilisation
rtp('get', 'rcmd', 'richmedia');
Modifier la configuration du modèle
Cette méthode modifie la configuration de modèle par défaut.
Appelez cette méthode avant d’appeler rtp(‘get’,‘rcmd’, ‘richmedia’);
Utilisation
rtp('set', 'rcmd', 'richmedia', 'template_id', conf_obj);
Exemples
Cet exemple montre comment modifier le texte de titre d’un modèle.
rtp("set", "rcmd", "richmedia","template1",
{
"rcmd.title.text": "RECOMMENDED CONTENT"
}
);
Cet exemple montre comment définir des catégories et plusieurs propriétés de configuration 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"
]
}
}
);
Utilisez « category » pour filtrer le contenu affiché dans les recommandations de contenu prédictif. Pour utiliser le contenu prédictif pour tout le contenu activé, laissez le champ « catégorie » vide.
Pour ne recommander que du contenu spécifique dans le modèle de média enrichi, ajoutez une catégorie pour le contenu sur la page Définir le contenu . Associez ensuite cette catégorie au code du modèle de recommandation. Par exemple, catégorisez le contenu pertinent par sections de produit ou de solution de votre site web.
Cet exemple montre comment définir plusieurs propriétés de configuration pour un modèle.
rtp("set", "rcmd", "richmedia",
{
"template1":
{
"rcmd.title.text": "RECOMMENDED CONTENT",
"rcmd.general.font.family": "arial"
}
}
);
Propriétés de configuration
La prise en charge de la configuration peut varier en fonction du modèle.
Exemple de base
Cet exemple montre comment afficher trois recommandations dans un modèle. Copiez l’exemple dans une page 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 montre comment afficher trois recommandations dans un modèle. Le titre du modèle est « CONTENU RECOMMANDÉ » et le texte du bouton est « En savoir plus ». Copiez l’exemple dans une page 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 modèle de recommandation de média enrichi #1
Name : template1
Description : contenu horizontal qui comprend une image, un titre, une description et un bouton call-to-action.
Exemple de modèle de recommandation de média enrichi #2
Nom : template2
Description : contenu vertical qui comprend une image, un titre, une description et un bouton call-to-action.
Exemple de modèle de recommandation de média enrichi #3
Nom : template3
Description : contenu vertical qui comprend uniquement un titre et une description. Lorsque vous pointez dessus, l’en-tête change de couleur et renvoie vers l’URL du contenu. La description renvoie également au contenu sans changer de couleur.
