Grâce aux filtres personnalisés de Poool Engage, vous pouvez affiner facilement le ciblage de vos éléments.
Cette fonctionnalité vous permet ainsi d'appliquer de multiples règles d'affichage/masquage selon des caractéristiques qui vous sont propres, en plus de toutes les conditions natives proposées dans votre Dashboard.
Le filtre personnalisé vous permet d'utiliser n'importe quelle donnée, dans la mesure où celle-ci est disponible de votre côté (datalayer, base de donnée).
Quel fonctionnement côté technique ?
Niveau code, cela suppose d'envoyer un tableau de variables/valeurs (au format "string") depuis la configuration du script Engage, dans la méthode autoCreate().
engage.autoCreate({filters:['valeur1', 'valeur2','valeur3']}):
Il n'y a aucune limite dans le nombre de valeurs à passer dans ce tableau.
Quel paramétrage dans le Dashboard ?
Côté Dashboard, vous pouvez ensuite appliquer des conditions selon les filtres qui sont passés dans l'intégration. Choisissez pour cela la condition suivante :
👉 Afficher/masquer
👉 Renseignez dans les filtres le slug qui correspond exactement à ce qui est passé dans la configuration.
Assurez-vous que le slug que vous renseignez dans le Dashboard corresponde bien à ce qui est passé dans la configuration de la méthode autoCreate().
Exemple d'intégration simple
Regardons un petit exemple 🔎
Ici, je choisis de créer un élément Engage qui sera affiché pour mes utilisateurs qui sont fans de football, suivent l'actualité de la Ligue 1 et soutiennent le Paris Saint-Germain.
Dans le Dashboard, j'applique trois filtres : "football", "ligue-1" et "Paris Saint Germain" :
Côté intégration, la logique se traduit ainsi :
const user = { favoris: 'football', // Extrait de l'utilisateur };
const article = { rubrique: 'ligue-1', // Extrait de l'article };
const sport = { equipe: 'paris-saint-germain', // Extrait du sport };
// Configuration d'Engage avec des valeurs dynamiques
engage.autoCreate({filters:[user.favoris, article.rubrique, sport.equipe]);
Exemple d'intégration avec des variables du dataLayer
Pour aller plus loin, voici un exemple en exploitant des variables du dataLayer :
// Exemple de datalayer avec des informations dynamiques
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
user: {
favoris: 'football' // Sports favoris de l'utilisateur
},
article: {
rubrique: 'ligue-1' // Rubrique de l'article
},
sport: {
equipe: 'paris-saint-germain' // Équipe concernée
}
});
// Fonction pour extraire les valeurs du datalayer
function getDataLayerValue(path) {
return path.split('.').reduce((prev, curr) => (prev ? prev[curr] : undefined), window.dataLayer[0]);
}
// Configuration des filtres avec des valeurs dynamiques
autoCreate({filters:[
getDataLayerValue('user.favoris'),
getDataLayerValue('article.rubrique'),
getDataLayerValue('sport.equipe')
]});
Vous l'aurez compris, la clé du succès repose sur la définition des valeurs personnalisées que vous souhaitez activer.
🌟 Nous vous conseillons de définir en amont toutes les valeurs personnalisées qui vous seront utiles pour qu'elles soient correctement passées au moment de l'intégration dans la configuration de poool Engage. Une fois cette configuration faite côté technique, plus besoin d'y toucher, vous êtes désormais autonome pour créer vos filtres personnalisés !
Si vous avez la moindre question, n'hésitez pas à contacter nos équipes !