Bibliothèque — Emplacements du Site Web

Les emplacements du site Web sont des sections définies par l'utilisateur au sein d'une page, qui indiquent où le contenu spécifique à l'action doit être placé dans le site Web. Il peut s'agir de bannières, pop-in, etc. La section Emplacements du site Web affiche un aperçu de tous les emplacements sur le site et de leur utilisation.

Remarque : Cet onglet n'est visible que pour les utilisateurs disposant des permissions adéquates pour les emplacements de site Web dans la bibliothèque.

Passez la souris sur un emplacement pour que les icônes suivantes s'affichent :

  • icône d'utilisation Icône d'utilisation — affiche l'aperçu de l'emplacement, avec la liste des offres pour lesquelles l'emplacement est utilisé.

  • icône d'utilisation Icône de suppression — s'affiche lorsqu'un emplacement n'est pas utilisé.

Remarque : Les filtres des différents types d'emplacements sont adaptés dynamiquement en fonction des emplacements existants.

Remarque : Les emplacements utilisés dans les actions supprimées seront toujours disponibles dans le reporting. Le cas échéant, la case correspondante est cochée.

Note technique : Si vous essayez d'accéder à la fenêtre Emplacements dans le chapitre Bibliothèque d'une Unité commerciale qui n'est pas connectée à Site, un avertissement s'affiche. Pour utiliser les emplacements, vous devez rendre Site disponible pour vos Unités commerciales et activer les permissions suivantes pour votre utilisateur :

Aperçu de l'utilisation de l'emplacement

Les détails suivants sont affichés dans l'aperçu de l'utilisation d'un emplacement :

  • Offre — Nom de l'offre dans laquelle l'emplacement est utilisé.

  • Action — Nom de l'action dans laquelle l'emplacement est utilisé.

  • Reporting uniquement — Les emplacements utilisés dans les actions supprimées sont toujours disponibles dans le reporting. La case est cochée, le cas échéant.

Création d'un emplacement

Les types d'emplacements suivants peuvent être créés dans le chapitre Bibliothèque : HTML, script, pop-in, image et CSS.
Pop-up, élément de liste et redirection sont des types d'emplacements qui ne sont plus pris en charge. Toutefois, pour des raisons de rétrocompatibilité, si ces types ont été créés précédemment dans Site, ils sont visibles dans Selligent en mode lecture seule.

Pour créer un emplacement, cliquez sur Nouveau > Emplacement de site Web dans la barre d'outil de la page de démarrage de la bibliothèque. Vous pouvez également cliquer sur Nouveau directement dans l'onglet Emplacement du site Web.

 

Un assistant s'ouvre, permettant de sélectionner le type d'emplacement :

L'écran Propriétés du type sélectionné s'affiche.

 

Propriétés des emplacements

Propriétés communes

Il existe un ensemble de propriétés communes pour chaque type d'emplacement :

  • Nom — Nom de l'emplacement.
  • S'applique à — Vous pouvez configurer l'emplacement de manière à ce qu'il s'applique à : « Tous les sites Web », « Pour ces sites Web seulement » ou « Tous les sites Web sauf les suivants ».
  • Il s'agit d'un emplacement invasif — Les emplacements invasifs, appliqués aux pop-in, pop-up, etc., interrompent réellement l'expérience de navigation. Lorsque cette case est cochée, une option supplémentaire s'affiche, permettant de configurer le plafonnement de sa fréquence, c'est-à-dire la fréquence à laquelle l'emplacement sera montré à un utilisateur. Exemple : 1 fois par visite, 1 fois par jour, etc.

    Remarque : Il existe deux niveaux de plafonnement des fréquences dans Site. Au niveau de l'emplacement, comme expliqué dans le paragraphe ci-dessus, mais aussi au niveau de la configuration de l'univers. Vous trouverez plus d'informations ici.


    Exemple 1 :
    L'univers A a un plafonnement défini au niveau de la configuration de l'univers, de sorte à avoir un maximum de 3 emplacements invasifs par visite (total de tous les différents emplacements invasifs potentiels).

    L'emplacement X est invasif, avec un plafonnement configuré pour s'afficher 1 fois par visite.

    Conclusion : Le visiteur consulte le site Web, peut potentiellement voir un maximum de 3 emplacements invasifs au total, mais ne voit l'emplacement X qu'une seule fois, car il est plafonné à une seule fois par visite.


    Exemple 2 :
    L'univers A a un plafonnement défini au niveau de la configuration de l'univers, de sorte à avoir un maximum de 3 emplacements invasifs par visite (total de tous les différents emplacements invasifs potentiels).

    L'emplacement X est un emplacement invasif, avec un plafonnement configuré pour s'afficher 2 fois par visite. Il est utilisé dans l'offre 1 (l'offre 1 est prioritaire sur l'offre 2).

    L'emplacement Y est aussi un emplacement invasif, avec un plafonnement configuré pour s'afficher 3 fois par visite. Il est utilisé dans l'offre 2 (l'offre 2 n'est pas prioritaire sur l'offre 1).

    Conclusion: Le visiteur voir s'afficher l'« emplacement X » 2 fois et l'« emplacement Y » 1 fois seulement. Cela est dû au fait que la configuration de l'univers plafonne à seulement 3 emplacements invasifs par visite.

Propriétés spécifiques à l'emplacement

Outre les propriétés par défaut, chaque emplacement possède des propriétés spécifiques.

Le tableau ci-dessous donne un aperçu des propriétés spécifiques de l'emplacement :

HTML Image Script CSS Élément de liste Redirection Pop-in Pop-up
Type de sélecteur* X X X
Chemin du sélecteur* X X
Scope du sélecteur* X X X X X X
Appliquer à toutes les correspondances de chemin* X X
Action* X X X
iFrame* X X
Mise en page* X X X X
Style* X X
CSS* X X X

Remarque : Les pop-ups peuvent être bloqués par le navigateur web et sont plus intrusifs que les pop-ins.

 

  • Scope du sélecteur — Permet de configurer l'emplacement comme Global ou Spécifique. Global signifie que l'emplacement apparaîtra sur l'ensemble de la page Web. Pour ne sélectionner qu'une zone spécifique du site Web où l'emplacement sera appliqué, saisissez le chemin de sélection spécifique correspondant.

  • Type de sélecteur — Le chemin du sélecteur peut être de 2 types différents : CSS ou XPath. Exemple de chemin du sélecteur XPath : //div[@id="content"/div/div/h1, l'équivalent en type CSS serait : div#content > div > div > h1.

  • Le chemin du sélecteur — Chemin du code de votre site Web définissant l'emplacement. Pour cela, vous pouvez saisir manuellement le chemin du sélecteur ou en sélectionnant le chemin de l'élément via le sélecteur d'éléments sur le site Web lui-même.

    Pour ce faire, cliquez sur Sélectionner sur le site Web. Une fenêtre pop-up s'affiche, dans laquelle vous pouvez sélectionner l'un de vos domaines enregistrés dans votre univers de Site liés à votre Unité commerciale.

    Remarque : Si vous sélectionnez un domaine, vous pouvez toujours changer l'URL en une sous-page de ce dernier.

    Une fois que vous avez sélectionné votre domaine, cliquez sur Accéder au site Web. Le domaine configuré s'ouvre dans un nouvel onglet du navigateur avec le sélecteur d'éléments. Vous avez ici la possibilité de sélectionner une zone du site Web à utiliser comme emplacement.

    Par défaut, le Mode de sélection est réglé sur ON. Les zones du site Web sont alors mises en évidence lorsque vous les survolerez, ce qui facilite le choix d'une zone.
    Lorsque vous cliquez avec le bouton droit de la souris sur une zone de site Web, vous pouvez également sélectionner des éléments parents tels que <DIV>. L'élément sélectionné est affiché et mis en évidence en haut. Le survol d'un élément parent dans le menu contextuel met en évidence la zone correspondante sur le site Web.
    Pour sélectionner une zone comme emplacement, faites un clic gauche pour confirmer. Le chemin du sélecteur est automatiquement mis à jour avec votre zone sélectionnée.

    Remarque : Avec le sélecteur d'éléments, le type de sélecteur est toujours CSS.

    Remarque : Si vous modifiez un emplacement existant, l'élément précédemment sélectionné est mis en évidence.

    Exemple : Le domaine de notre boutique en ligne de vente au détail de Parana a l'URL suivant : https://paranadigital.selligent.com. Vous pouvez changer l'URL en utilisant celui de la page de présentation consacrée à la mode féminine, car l'emplacement doit être affiché sur cette page : https://paranadigital.selligent.com/shop/fashion/women.

  • Appliquer à toutes les correspondances de chemin — Un site Web peut avoir plusieurs chemins similaires. Si vous cochez la case Appliquer à toutes les correspondances de chemin, toutes les zones ayant le même chemin seront incluses comme emplacement. Sinon, il s'agira du premier chemin sur n'importe quelle page du site Web.

  • Action — L'action fait référence à l'endroit où les emplacements doivent être insérés dans le code. Exemple : Insérer avant un élément, insérer après un élément, remplacer le contenu d'un élément, etc.

  • Utilisable sans iFrame — Vous pouvez également utiliser l'emplacement sans iFrame. Lorsque cette option est sélectionnée, l'emplacement peut être utilisé sur un site Web sans être placé dans un iFrame. Cette technique présente un avantage majeur : le style du site Web s'appliquera également à l'emplacement et la conception responsive sera respectée. Un avertissement s'affiche lorsque vous sélectionnez cette option, vous indiquant un impact potentiel sur le site Web.

  • Mise en page — Définissez la taille de l'emplacement. Si aucune valeur n'est saisie, l'emplacement prendra les dimensions par défaut de la zone sélectionnée dans le chemin du sélecteur. Les dimensions ne sont utilisées que si votre contenu est chargé dans une iFrame.

  • Vous pouvez également ajouter un style à un emplacement.

    • Image — Vous pouvez ajouter un effet de fondu à l'image.
    • Pop-in — Vous pouvez configurer le style du bouton Fermer et la bordure, ou encore ajouter quelques options d'affichage (effet de fondu, rendre le pop-in responsive ou ajouter une couleur de superposition).

  • Dans la section CSS, vous pouvez ajouter à cet emplacement des classes CSS définies sur le site Web du client (vous pouvez saisir plusieurs classes, séparées par des espaces, sans point). Ainsi, la conception du site Web est intégrée à l'emplacement. Des propriétés CSS peuvent également être ajoutées à cet emplacement.

Exemple 1 : emplacement HTML
Dans cet exemple, nous allons créer un emplacement HTML afin de présenter l'offre Bannière Parana sur la boutique en ligne Parana lorsque les utilisateurs tombent sur cette offre. Elle sera située en haut de la page d'accueil. Les propriétés suivantes sont configurées :

  • Nom— Bannière Parana
  • Type de sélecteur — CSS
  • Chemin du sélecteur — L'élément avec l'ID « slideshow » a été sélectionné dans le sélecteur d'éléments.
  • Appliquer à toutes les correspondances de chemin — Non coché dans cet exemple. Les ID CSS ne sont utilisés qu'une fois, ils ne sont donc pas applicables.
  • Action — L'élément avec l'ID « slideshow » sera remplacé.
  • S'applique à— Uniquement pour le domaine numérique Parana.
  • Emplacement invasif— Il s'agit d'un emplacement invasif, car il est situé en avant et au centre de la page d'accueil, de sorte que l'offre ne sera affichée qu'une fois par visite.
  • Utilisable sans iFrame — Non coché dans cet exemple, car nous voulons définir le style dans le HTML lui-même (action de l'offre).
  • Mise en page — La largeur et la hauteur de la bannière ont étédéfinies.

Exemple 2 : emplacement des pop-in
Cet exemple crée un emplacement pour un pop-in d'abonnement sur la boutique en ligne de Parana. L'utilisateur est invité à s'abonner à Parana et reçoit un code de réduction utilisable lors de son prochain achat. Les propriétés suivantes sont configurées :

  • Nom — Bannière Parana
  • Scope du sélecteur — Est réglé sur Global, car le pop-in doit s'afficher sur n'importe quelle page de la boutique en ligne.
  • S'applique à — Tous les sites Web configurés pour ce domaine.
  • Emplacement invasif — Un trop grand nombre de pop-in peut déranger l'utilisateur, c'est pourquoi nous avons fixé un maximum de 1 pop-in par visite sur la boutique en ligne de Parana.
  • Utilisable sans iFrame— Non coché, car nous utiliserons les propriétés CSS pour styliser l'emplacement.
  • Mise en page— Nous définissons une largeur, une hauteur et la position de l'emplacement. L'indice Z est fixé à 1 pour que le pop-in s'affiche à l'avant de tous les autres éléments de la boutique en ligne.
  • Style— Un style a été défini pour le bouton de fermeture et les bordures du pop-in. Certaines options d'affichage sont cochées : le pop-in est responsive, une superposition est définie pour le faire ressortir davantage et un effet de fondu est également appliqué.
  • CSS— Le pop-in utilisera la classe « parana-global » qui est configurée sur la boutique en ligne elle-même. La couleur de fond a été fixée à. blanc.