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

Détails

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

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

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

Détails

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 le Enhanced Experience Composer, essayez de désactiver le Enhanced Experience Composer et utilisez le Visual Experience Composer à la place.

Pour désactiver le 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 :

Si ni le Visual Experience Composer ni le Enhanced Experience Composer ne fonctionnent, utilisez une extension de navigateur telle que Requestly (Chrome ou Firefox) ou Modifier les en-têtes de réponse (Firefox) qui peuvent remplacer les options d’en-tête X-Frames pour votre site et permettre leur chargement dans les iFrames, ce qui active le compositeur d’expérience visuelle. Si vous ne pouvez pas utiliser d’extensions de navigateur, utilisez le compositeur d’expérience d’après les formulaires.

note note
NOTE
En plus des informations suivantes, vous pouvez utiliser l’extension Adobe Target Visual Editing Helper par Google Chrome.

note note
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. Éteignez la 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 le Add sur Remove.

     • Basculez le Request sur 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 respectent la casse.

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

     

6. Cliquez sur  Save.

   

   Vous devriez maintenant pouvoir charger rapidement la page 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 Modifier les en-têtes de réponse .
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.

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

Détails

• La meilleure compatibilité avec le VEC est assurée par la version la plus récente 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.

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

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

  Vérifiez qu’aucune modification non valide n’est 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’elles sont incorporées dans un iFrame. Cela inclut l’utilisation de directives CSP 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 et n’incluez pas de fichiers portant 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 à gauche de l’URL dans la barre d’adresse du navigateur, puis sur Disable protection on this page

• Vous avez tapé une URL incorrecte.

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

Détails

Lors de l’utilisation du mode Browse, si vous accédez à une URL pour laquelle aucune bibliothèque Target n’est implémentée (at.js ou Adobe Experience Platform Web SDK) ou qui contient un en-tête frame-buster, le compositeur d’expérience visuelle semble endommagé. En raison de problèmes de sécurité du navigateur, Target ne pouvez pas accéder correctement à l’URL à laquelle vous avez accédé ou l’URL du compositeur d’expérience visuelle n’est pas mise à jour de manière cohérente si la page se charge.

Ce problème se produit, car le compositeur d’expérience visuelle charge la page web dans une <iframe>. Les mécanismes de sécurité actuels des navigateurs empêchent l’interface utilisateur Target d’accéder aux éléments de l’image donnée en raison de la politique de même origine. Les navigateurs bloquent les scripts qui tentent d’accéder à une image ayant une origine différente et contenant des informations telles que la location.href.

Vous devez utiliser la nouvelle extension Visual Editing Helper pour injecter la bibliothèque de Target dans les pages afin de les parcourir de manière optimale.

Détails

Vérifiez s’il existe des fichiers CSS susceptibles d’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 dans 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.