Pourquoi afficher plusieurs intégrations sur une même page ?
Certaines pages de votre site web s'adressent à des profils variés. Une page de présentation de vos formations, par exemple, peut cibler à la fois des candidats en Bachelor, en Master et en alternance. Plutôt que de rediriger chaque visiteur vers une page différente, Magma vous permet d'afficher plusieurs campagnes sur une seule et même page.
Chaque campagne peut correspondre à un programme, une formation ou un type de profil différent. Le visiteur interagit avec l'intégration qui correspond à son besoin, directement depuis votre site.
Pré-requis
Avant de commencer, assurez-vous que :
- Vous avez accès au code source de votre site web (ou à votre CMS)
- Vous avez créé les campagnes concernées dans votre tableau de bord Magma
- Vous disposez du
campaignUuidet de l'integrationUuidpour chaque campagne (disponibles dans la section 4 - Intégration de chaque campagne)
Étape 1 : Ajouter le script Magma
À la fin de la balise <head> de votre page (juste avant </head>), ajoutez le script d'initialisation Magma :
<script src="https://cdn.jsdelivr.net/gh/magma-app/magma-widget@latest/src/widget/initializer.js" async></script>Étape 2 : Déclarer vos campagnes
Au début ou à la fin de votre balise <body>, ajoutez un bloc <script> contenant la liste de vos campagnes. Le tableau window.magma_app accepte autant d'entrées que nécessaire.
Pour 1 intégration :
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "xxxx",
integrationUuid: "xxxx",
},
];
</script>Pour 2 intégrations :
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "xxxx",
integrationUuid: "xxxx",
},
{
type: "campaignUuid",
uuid: "xxxx",
integrationUuid: "xxxx",
}
];
</script>Pour 3 intégrations :
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "xxxx",
integrationUuid: "xxxx",
},
{
type: "campaignUuid",
uuid: "xxxx",
integrationUuid: "xxxx",
},
{
type: "campaignUuid",
uuid: "xxxx",
integrationUuid: "xxxx",
},
];
</script>Le principe est simple : chaque objet du tableau correspond à une campagne. Vous pouvez en ajouter autant que nécessaire en suivant le même format.
Étape 3 : Remplacer les identifiants
Remplacez chaque "xxxx" par les vrais identifiants de vos campagnes. Vous les trouverez dans votre tableau de bord Magma, section 4 - Intégration de chaque campagne.
Voici un exemple avec 3 campagnes configurées :
<script>
window.magma_app = [
{
type: "campaignUuid",
uuid: "PREMIER_UUID_CAMPAGNE",
integrationUuid: "PREMIER_UUID_INTEGRATION",
},
{
type: "campaignUuid",
uuid: "DEUXIEME_UUID_CAMPAGNE",
integrationUuid: "DEUXIEME_UUID_INTEGRATION",
},
{
type: "campaignUuid",
uuid: "TROISIEME_UUID_CAMPAGNE",
integrationUuid: "TROISIEME_UUID_INTEGRATION",
},
];
</script>Bonnes pratiques
- Testez sur différents appareils : vérifiez que l'affichage des multiples widgets reste lisible sur mobile et desktop.
- Ne surchargez pas la page : au-delà de 3-4 intégrations visibles simultanément, l'expérience utilisateur peut se dégrader. Préférez une approche ciblée.
- Combinez les types d'intégration : vous pouvez mixer un widget matching avec une bannière de parrainage sur la même page pour adresser différents objectifs.
- Vérifiez vos UUID : une erreur dans un
campaignUuidou unintegrationUuidempêchera l'intégration correspondante de s'afficher, sans bloquer les autres.
