DocumentationTargetGuide de Target

Résolution des problèmes liés à Visual Experience Composer

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Dans certains cas, des problèmes d’affichage se produisent parfois dans le Adobe Target Visual Experience Composer (VEC).

Lorsque j’ouvre mon site web dans Visual Experience Composer, les bibliothèques Target ne se chargent pas. (Compositeur d’expérience visuelle uniquement) section_8A7D3F4AD2CC4C3B823EE9432B97E06F

Target ajoute deux paramètres (mboxEdit=1 et mboxDisable=1) lors de l’ouverture du site web dans Visual Experience Composer.

Si votre site web (en particulier les applications monopage) supprime les paramètres ou les supprime réellement lors de la navigation d’une page à une autre (sans rechargement de page), la fonctionnalité Target est rompue et les bibliothèques Target ne se chargent pas.

Pour éviter ce problème, assurez-vous de ne pas supprimer ces deux paramètres.

Ma page ne s’ouvre pas dans le compositeur d’expérience avancé ou elle se charge lentement. Les activités ou les expériences se chargent lentement dans le compositeur d’expérience visuelle. (Compositeur d’expérience visuelle uniquement) section_71E7601BE9894E3DA3A7FBBB72B6B0C1

Plusieurs problèmes peuvent affecter les performances des pages dans les compositeurs d’expérience Target. Les problèmes courants sont les suivants :

  • La page ne contient pas de mbox.
  • Votre site utilise le blocage par proxy, ce qui ne permet pas à la page d’être ouverte dans les compositeurs d’expérience.
  • Votre site n’est pas autorisé à être ouvert dans une iFrame.

Si des problèmes se produisent dans l’élément Enhanced Experience Composer, désactivez l’élément Enhanced Experience Composer et utilisez plutôt l’élément Visual Experience Composer .

Pour désactiver Enhanced Experience Composer, accédez à Administration > Visual Experience Composer et désactivez l’option Enable Enhanced Experience Composer.

Le message d’erreur suivant s’affiche dans la console pour certains utilisateurs :

Message d’erreur de la console

Si Visual Experience Composer et Enhanced Experience Composer ne fonctionnent pas, utilisez une extension de navigateur telle que Requestly (Chrome ou Firefox) ou Modify Response Headers (Firefox) qui peut remplacer les options d’en-tête X-Frames de votre site et leur permettre d’être chargées dans les iFrames, en activant le VEC. Si vous ne pouvez pas utiliser les extensions de navigateur, utilisez le compositeur d’expérience d’après les formulaires.

NOTE
Outre les informations suivantes, vous pouvez utiliser l’ Adobe Target Visual Editing Helper extension pour Google Chrome.
NOTE
Utilisez ces modules externes uniquement dans le cadre de modifications dans le VEC.
Pour l’extension Requestly, chaque fois qu’il est nécessaire de supprimer des en-têtes, vous devez effectuer l’une des opérations suivantes :

  • Ajoutez des règles d’URL pour les URL que vous souhaitez ouvrir avec le compositeur d’expérience visuelle. Les en-têtes sont alors supprimés uniquement pour ces URL.

  • Activez la règle lorsque vous effectuez une modification dans le compositeur d’expérience visuelle et désactivez la règle lorsque vous ne l’utilisez pas.

Pour l’extension Modify Response Header (Firefox), comme vous ne pouvez pas ajouter de règle d’URL, vous devez effectuer les opérations suivantes :
  • Activez la règle lorsque vous effectuez une modification dans le compositeur d’expérience visuelle et désactivez la règle lorsque vous ne l’utilisez pas.

Pour utiliser l’extension Requestly sur Chrome ou Firefox :

  1. Désactivez le Enhanced Experienced Composer.

  2. Installez l’extension de navigateur Requestly sur Chrome ou Firefox.

  3. Ouvrez l’extension et configurez-la de la manière suivante :

  4. Sélectionnez Modify headers.

  5. Saisissez les entrées suivantes :

    • Nom de la règle

    • Règles de modification

      • Basculez de Add vers Remove.

      • Basculez de Request vers Response.

      • Saisissez X-Frame-Options en tant que nom d’en-tête.

      • Répétez les étapes précédentes et saisissez « x-frame-options » comme nom d’en-tête.

        note note
        NOTE
        Les en-têtes manipulés via Requestly sont sensibles à la casse.

      • Remplacez Equals par Contains comme condition pour l’URL source et saisissez l’URL de l’activité que vous essayez de charger dans le VEC.

      image chrome_extension

  6. Cliquez sur  Save.

    requestly image

    Vous devriez maintenant pouvoir charger la page rapidement avec le Visual Experience Composer.

Pour utiliser l’extension Modify Response Headers sur Firefox :

  1. Installez le Modify Response Headers sur Firefox et redémarrez le navigateur.
  2. Dans vos extensions Firefox, sélectionnez l’extension Modify Response Headers.
  3. Cliquez sur  Preferences.
  4. Sélectionnez Filter dans la liste déroulante Action.
  5. Dans le champ Header Name, saisissez : X-Frame-Options.
  6. Répétez les étapes 4 et 5 pour ajouter un filtre avec x-frame-options.
  7. Cliquez sur  Add.
  8. Cliquez sur  Start.

Extension Firefox

Après avoir configuré une extension, ouvrez Target. Vos pages doivent désormais se charger dans le Visual Experience Composer, même si l’option Enhanced Experience Composer est désactivée.

Ma page ne s’affiche pas dans le compositeur d’expérience visuelle (compositeur d’expérience visuelle uniquement) does-not-load

  • La meilleure compatibilité avec le VEC est assurée par la dernière version de l’extension : Adobe Experience Cloud Visual Editing Helper extension.

    Pour vérifier si vous utilisez la dernière version, accédez à Extensions > Manage Extensions, puis cliquez sur Details.

  • Visual Experience Composer nécessite des bibliothèques de création pour effectuer des modifications sur la page web. Ces bibliothèques sont intégrées à la bibliothèque at.js et sont téléchargées par l’extension à partir des serveurs Adobe chaque fois que le VEC est utilisé.

    L’extension télécharge la bibliothèque at.js que at.js ou Adobe Experience Platform Web SDK soient déjà inclus dans la page.

    Vérifiez qu’aucune modification non valide n’a été ajoutée aux en-têtes at.js configurés dans la section Administration > Implementation .

  • Assurez-vous que la page web ne bloque pas les requêtes obligatoires pour le chargement lorsqu’elle est incorporée dans un iFrame. Cela inclut l’utilisation de directives CSP de frame-ancestors ou de code JS personnalisé incorporé dans le site web du client, les balises meta HTML ou l’en-tête x-frame-options.

  • Assurez-vous que le code JavaScript de la page web n’interfère pas avec les bibliothèques de création. N’utilisez pas ou n’incluez pas de fichiers utilisant les noms réservés suivants :

    • target-vec-helper.js

    • target-vec.js

    • target.js

    • admin.css

    • sizzle.js

    • mixContentCheck.html

      En outre, le remplacement accidentel de variables ou d’événements définis dans ces fichiers peut entraîner des problèmes avec le compositeur d’expérience visuelle.

  • Le navigateur bloque une page non sécurisée d’un site sécurisé.

    Cliquez sur l’icône située à gauche de l’URL dans la barre d’adresse du navigateur, puis cliquez sur Disable protection on this page.

  • Vous avez tapé une URL incorrecte.

  • Si le chargement de votre site web échoue dans le VEC ou se comporte de manière inattendue, un correctif potentiel consiste à accepter les cookies de votre site web dans le navigateur avant de tenter de charger le site web dans Target.

Le compositeur d’expérience visuelle semble rompu lorsque j’utilise le mode de navigation. (Compositeur d’expérience visuelle uniquement) section_FA2A18E8FD6A4274B2E395DBAA2FB407

Lors de l’utilisation du mode de navigation, si vous accédez à une URL pour laquelle Target bibliothèques n’ont pas été implémentées (at.js ou SDK Web Adobe Experience Platform) ou si vous avez un en-tête de propagation d’images, le VEC apparaît rompu. En raison de problèmes de sécurité du navigateur, Target ne peut pas accéder correctement à l’URL à laquelle vous avez accédé ou l’URL du VEC ne se met pas à jour de manière cohérente si la page se charge.

Ce problème se produit car le VEC charge la page web dans un <iframe>. Les mécanismes de sécurité actuels des navigateurs empêchent l’interface utilisateur Target d’accéder aux éléments du cadre donné en raison de la stratégie de même origine. Les navigateurs bloquent les scripts qui tentent d’accéder à un cadre d’une origine différente et qui contient des informations telles que le location.href.

Vous devez utiliser la nouvelle extension Visual Editing Helper (recommandée) ou l’ ancienne extension pour injecter la bibliothèque Target dans les pages afin de les parcourir de manière optimale.

Problèmes provoqués par les conflits CSS dans le Visual Experience Composer

Vérifiez si des fichiers CSS peuvent avoir un impact sur la visibilité lors du chargement de la page web dans l’éditeur. Par exemple, l’utilisation de la propriété overflow: hidden sur le corps de la page peut entraîner des problèmes de défilement ou déclencher des événements de clic qui peuvent interférer avec le menu de création.

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654