Vous consultez actuellement l'aide de la version:

Vous pouvez facilement réaliser des expériences riches et engageantes avec des images statiques destinées aux clients en faisant glisser et en déposant des zones réactives « Shoppable » sur une image. Les zones réactives Shoppable associent des informations supplémentaires sur un produit ou un service avec une fonction « Ajouter au panier » ou « Acheter » directe, au point de vente. Les clients peuvent appuyer ou cliquer sur ces zones réactives et peuvent être liés directement au produit ou service, l’ajouter à un panier d’achat ou encore être liés à une page web. Dirigez les expériences, par exemple augmenter l’engagement et la conversion des clients sur votre site web.

Voici une bannière publicitaire avec une fenêtre contextuelle d’aperçu rapide. L’utilisateur active l’aperçu rapide en appuyant sur le cercle ou la « zone réactive » du modèle.

chlimage_1

Voir les images interactives en action sur la page web ci-dessus en visitant la page :

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion-QVzoom/index2-shoppable.html

Découvrir comment les bannières d’images interactives sont créées

Visionnez une présentation vidéo de 10 minutes et 33 secondes sur la création de bannières d’images interactives. Vous apprendrez également à prévisualiser, modifier et diffuser des bannières d’images interactives.

Démarrage rapide : images interactives

La description suivante du processus étape par étape est conçue pour vous aider à mettre en route rapidement les images interactives dans AEM Assets.

Recherchez le titre Exemple dans certaines tâches de démarrage rapide. Il contient un tutoriel rapide, basé sur la page web de démonstration ci-dessous, pour illustrer les étapes de l’intégration des images interactives sur votre site web :

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-0.html

Étapes des images interactives :

  1. (Facultatif) Identification des variables de zone réactive : si vous utilisez des instances autonomes d’AEM Assets et de Dynamic Media, commencez par identifier les variables dynamiques utilisées dans votre aperçu rapide existant afin de pouvoir entrer les données de zone réactive lors de la création de l’image interactive. Reportez-vous à la section (Facultatif) Identification des variables de zone réactive.
    Cependant, si vous utilisez AEM Sites ou AEM eCommerce, ou les deux, cette étape n’est pas nécessaire.
    Reportez-vous à la section Concepts de commerce électronique dans AEM Assets.
  2. (Facultatif) Création d’un paramètre prédéfini de visionneuse d’images interactives. Personnalisez l’image utilisée pour représenter des zones réactives. Vous n’avez pas besoin de créer votre propre paramètre prédéfini de visionneuse d’images interactives si vous envisagez plutôt d’utiliser le paramètre prédéfini de visionneuse d’images interactives prêt à l’emploi Shoppable_Banner.
    Reportez-vous à la section (Facultatif) Création d’un paramètre prédéfini de visionneuse d’images interactives.
  3. Téléchargement d’une bannière d’image : téléchargez les bannières d’images que vous souhaitez rendre interactives.
    Voir Téléchargement d’une bannière d’image.
  4. Ajout de zones réactives à une bannière d’image : ajoutez une ou plusieurs zones réactives à une bannière d’image et associez chacune d’elles à une action, comme un lien hypertexte, un aperçu rapide ou un fragment d’expérience. Après avoir ajouté des zones réactives, vous terminez cette tâche en publiant l’image interactive.
    Reportez-vous à la section Ajout de zones réactives à une bannière d’image.
    Reportez-vous à la section Prévisualisation d’images interactives – Facultatif. Si vous le souhaitez, vous pouvez afficher une représentation de votre bannière publicitaire et tester son interactivité.
    Voir Publication de ressources pour obtenir des informations sur la publication de ressources d’images interactives.
  5. Ajout d’une image interactive sur votre site web ou sur votre site web dans AEM
    Si vous utilisez AEM Sites ou AEM eCommerce, ou les deux, vous pouvez ajouter l’image interactive directement dans une page web dans AEM en faisant glisser le composant Interactive Media dans la page. Reportez-vous à la section Ajout de ressources Dynamic Media aux pages.
    Si vous utilisez des instances autonomes d’AEM Assets et de Dynamic Media, vous devez copier le code intégré sur votre site web, puis l’intégrer à votre aperçu rapide existant. Reportez-vous à la section Intégration d’une image interactive à votre site web.
    Si vous utilisez un gestionnaire de contenu web (WCM) tiers, vous devez intégrer la nouvelle vidéo interactive à l’aperçu rapide existant utilisé sur votre site web. Reportez-vous à la section Intégration d’une image interactive dans un aperçu rapide existant.

(Facultatif) Identification des variables de zone réactive

Remarque :

Cette tâche n’est nécessaire que si les conditions ci-dessous sont vraies :

  • Vous souhaitez ajouter de l’interactivité à votre image en déclenchant des aperçus rapides.
  • Votre mise en œuvre d’AEM n’utilise pas de structure d’intégration de commerce électronique pour extraire des données de produit dans AEM à partir d’une solution de commerce électronique, comme IBM WebSphere Commerce, Elastic Pathe, Hybris ou Intershop. Reportez-vous à la section Concepts de commerce électronique dans AEM Assets.

Si votre mise en œuvre d’AEM utilise le commerce électronique, vous pouvez ignorer cette tâche et passer à la tâche suivante.

Commencez par identifier les variables dynamiques utilisées par votre mise en œuvre de l’aperçu rapide existant afin de pouvoir entrer les données de zone réactive pour créer l’image interactive.

Lorsque vous ajoutez des zones réactives à une image de bannière dans AEM Assets, vous devez affecter un SKU ainsi que des variables supplémentaires facultatives à chaque zone réactive. Ces variables de zones réactives sont utilisées ultérieurement pour mettre en correspondance les zones réactives avec le contenu de l’aperçu rapide.

Il est important d’identifier correctement le nombre et le type de variables à associer aux données de zone réactive. Chaque zone réactive ajoutée à une image de bannière doit comporter suffisamment d’informations pour identifier clairement le produit sur le système principal existant. 

Il existe différentes manières d’identifier un jeu de variables à utiliser pour les données des zones réactives.

Parfois, il s’avère suffisant de consulter des spécialistes de l’informatique responsables de l’implémentation d’aperçus rapides existante car il est probable qu’ils connaissent le jeu minimal de données requis pour identifier un aperçu rapide dans le système. Néanmoins, dans la plupart des cas, il est également possible d’analyser simplement le comportement existant du code frontal.

La majorité des implémentations d’aperçu rapide utilisent le paradigme suivant :

  • L’utilisateur active un élément de l’interface utilisateur sur le site web. Par exemple, il clique sur le bouton Aperçu rapide.
  • Le site web envoie une demande Ajax au serveur principal afin de charger les données ou le contenu de l’aperçu rapide, le cas échéant.
  • Les données de l’aperçu rapide sont traduites en contenu en préparation du rendu sur la page web.
  • Enfin, le code frontal effectue le rendu visuel de ce contenu à l’écran.

L’approche consiste alors à visiter différentes zones du site web existant où la fonctionnalité d’aperçu rapide est implémentée, à déclencher l’aperçu rapide et à capturer l’URL Ajax envoyée par la page web pour charger les données ou le contenu de l’aperçu rapide.

Normalement, il n’est pas nécessaire d’utiliser des outils de débogage spécialisés. Les navigateurs web modernes incluent des inspecteurs web qui font un travail adéquat. Vous trouverez ci-dessous quelques exemples de navigateurs web qui incluent des inspecteurs web :

  • Pour voir toutes les demandes HTTP sortantes dans Google Chrome, appuyez sur F12 pour ouvrir le panneau Outils de développement, puis cliquez sur l’onglet Réseau.
  • Dans Firefox, vous pouvez activer le plug-in Firebug en appuyant sur F12 et utilisez l’onglet Réseau ou bien, vous pouvez utiliser l’outil Inspecteur intégré et son onglet Réseau.

Lorsque la surveillance de réseau est activée dans le navigateur, déclenchez l’aperçu rapide sur la page.

Ensuite, recherchez l’URL Ajax de l’aperçu rapide dans le journal du réseau et copiez l’URL enregistrée pour une analyse future. Dans la plupart des cas, lorsque vous déclenchez l’aperçu rapide, de nombreuses demandes sont envoyées vers le serveur. En général, l’URL Ajax de l’aperçu rapide est l’une des premières de la liste. Elle comporte une partie ou un chemin d’accès de chaîne de requête complexe et son type MIME de réponse est text/html, text/xml ou text/javascript.

Au cours de ce processus, il est important de visiter différentes zones de votre site web, avec différentes catégories et différents types de produits. En effet, les URL d’aperçu rapide peuvent comporter des parties qui sont communes à une catégorie du site web donnée mais qui ne changent que si vous visitez une zone différente du site web.

Dans le plus simple des cas, la seule partie variable de l’URL d’aperçu rapide est le SKU du produit. Dans ce cas, la valeur de SKU est la seule donnée requise pour ajouter des zones réactives à l’image de bannière.

Néanmoins, dans des cas complexes, l’URL d’aperçu rapide comporte différentes éléments qui varient en plus du SKU, par exemple, l’ID de catégorie, le code couleur, le code de taille, etc. Dans ce cas, chaque élément est une variable distincte dans la définition des données des zones réactives dans la fonctionnalité d’images interactives Shoppable d’AEM Assets.

Consultez les exemples suivants d’URL d’aperçu rapide et les variables de zones réactives résultantes :

SKU unique dans la chaîne de requête.

Les URL d’aperçu rapide enregistrés comprennent les URL suivantes :

  • http://server/json?productId=866558&source=100

  • http://server/json?productId=1196184&source=100

  • http://server/json?productId=1081492&source=100

  • http://server/json?productId=1898294&source=100

La seule partie variable dans l’URL est la valeur du paramètre de chaîne de requête productId = ; il s’agit d’une valeur de SKU. Par conséquent, nos zones réactives ont besoin uniquement de champs SKU avec des valeurs telles que 866558, 1196184, 1081492, 1898294.

SKU unique dans le chemin de l’URL.

Les URL d’aperçu rapide enregistrés comprennent les URL suivantes :

  • http://serveur/produit/6422350843

  • http://serveur/produit/1607745002

  • http://serveur/produit/0086724882

La partie variable se trouve dans la dernière partie du chemin et devient la valeur SKU des zones réactives : 6422350843, 1607745002, 0086724882.

SKU et ID de catégorie dans la chaîne de requête.

Les URL d’aperçu rapide enregistrés comprennent les URL suivantes :

  • http://serveur/quickView/produit/?category=1100004&prodId=305466

  • http://serveur/quickView/produit/?category=1100004&prodId=310181

  • http://serveur/quickView/produit/?category=1740148&prodId=308706

Dans ce cas, l’URL contient deux parties variables. Le SKU est stocké dans le paramètre prodId et l’ID de catégorie est stocké dans le paramètre category=.

Les zones réactives sont définies sous la forme de paires, à savoir une valeur de SKU et une autre variable nommée categoryId. Les paires obtenues sont les suivantes :

  • SKU est 305466 et categoryId est 1100004.

  • SKU est 310181 et categoryId est 1100004.

  • SKU est 308706 et categoryId est 1740148.

 

Exemple

Vous pouvez appliquer la même approche utilisée dans les trois exemples ci-dessus à la page web de démonstration :

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-0.html

La page web de démonstration comporte plusieurs miniatures de produit, chacune disposant d’un bouton d’aperçu rapide libellé « En voir plus ». L’outil de débogage de votre navigateur web étant toujours activé, cliquez sur chaque bouton et notez les URL d’aperçus rapides enregistrées. Une fois que vous avez activé les quatre aperçus rapides du produit disponibles sur la page, vous obtenez la liste suivante des demandes d’aperçu rapide qui sont envoyées au serveur principal :

  • /datafeed/Men-Windbreaker.json
  • /datafeed/Men-SimpleHenley.json
  • /datafeed/Men-CamoPullover.json
  • /datafeed/Women-QuiltedDownJacket.json

Lorsque vous observez ces appels de serveur, vous constatez que les informations spécifiques au produit ne sont présentes que dans le chemin de la requête. Vous notez également que la chaîne de requête n’est pas du tout utilisée et que deux types de données distincts sont impliqués :

  • Le premier type correspond au sexe, Homme ou Femme. Vous pouvez l’appeler « catégorie de produits ».
  • Le second type correspond au nom du produit, comme « CamoPullover ». Vous pouvez considérer que c’est la SKU du produit.

Compte tenu de ces informations, l’intégralité de l’URL de l’aperçu rapide suit le schéma suivant :

/datafeed/$categoryId$-$SKU$.json

Sur la base de cette analyse, vous utiliseriez categoryId et SKU pour les zones réactives.

Vous êtes à présent prêt à télécharger une bannière d’image et à y ajouter des zones réactives à l’aide de la fonctionnalité d’images interactives Shoppable d’AEM Assets.

(Facultatif) Création d’un paramètre prédéfini de visionneuse d’images interactives

Vous pouvez choisir d’utiliser la valeur par défaut, le paramètre prédéfini de visionneuse d’images interactives, appelés « Shoppable_Banner », qui est fourni avec AEM Assets. Vous pouvez également créer votre propre paramètre prédéfini de visionneuse personnalisé à utiliser avec les images interactives.

Lorsque vous créez un paramètre prédéfini de visionneuse d’images interactives, vous pouvez déterminer l’aspect des zones réactives de la bannière d’image. Dans le cadre de la création du paramètre prédéfini de visionneuse, vous pouvez choisir d’utiliser une image de zone réactive provenant d’une galerie d’images prédéfinies.

Une fois que vous avez enregistré le paramètre prédéfini de visionneuse, il est activé automatiquement dans la page de liste Paramètre prédéfini de visionneuse dans AEM Assets. Cette fonctionnalité signifie qu’elle est visible dans le composant Interactive Media et chaque fois que vous affichez une ressource. Cependant, pour fournir une bannière interactive avec ce paramètre prédéfini de visionneuse, vous devez également publier votre paramètre prédéfini de visionneuse (cela vaut pour les paramètres prédéfinis de visionneuse personnalisés ou prêts à l’emploi). 

Pour créer un paramètre prédéfini de la visionneuse pour les images interactives :

  1. Dans le rail de gauche, appuyez sur Outils > Ressources > Paramètres visionneuse.

  2. Dans le coin supérieur droit de la page, appuyez sur Créer.

  3. Dans la boîte de dialogue Nouveau paramètre prédéfini de la visionneuse, saisissez un nom afin de décrire le paramètre prédéfini de la visionneuse de la bannière interactive.
    Il s’agit du titre qui apparaît dans la liste Paramètre prédéfini de la visionneuse après l’enregistrement.

  4. Dans le menu déroulant Type de contenu multimédia enrichi, sélectionnez Image interactive.

  5. Appuyez sur Créer.

  6. Sur la page Modifier le paramètre prédéfini de la visionneuse, appuyez sur l’onglet Aspect.

  7. Utilisez l’une des méthodes suivantes :

    • Pour télécharger votre propre image de zone réactive, appuyez sur l’icône Sélecteur de ressources. Dans la page Sélectionner le contenu, accédez à l’image de zone réactive que vous souhaitez utiliser, sélectionnez-la, puis appuyez sur l’icône en forme de coche dans le coin supérieur droit.
    • Pour sélectionner une image de zone réactive prédéfinie, appuyez sur l’icône Galerie de zones réactives. Dans la palette de la galerie de zones réactives, appuyez sur l’image de zone réactive que vous souhaitez utiliser.
  8. Dans le coin supérieur droit de la page, appuyez sur Enregistrer.

    Assurez-vous de publier le nouveau paramètre prédéfini de la visionneuse.

    Voir Publication des paramètres prédéfinis de la visionneuse que vous avez ajoutés.

    Vous êtes désormais prêt à télécharger une bannière d’image.

Téléchargement d’une bannière d’image

Si vous avez déjà téléchargé les images que vous souhaitez utiliser, passez à l’étape suivante Ajout de zones réactives à une bannière d’image.

Pour télécharger une bannière d’image :

  1. Téléchargez les bannières d’images que vous souhaitez rendre interactives.

    Reportez-vous à la section Téléchargement des ressources.

    Vous êtes maintenant prêt à ajouter des zones réactives à la bannière d’image. Reportez-vous à la tâche suivante ci-dessous.

Ajout de zones réactives à une bannière d’image

Vous pouvez ajouter des zones réactives à une bannière d’image à l’aide de l’éditeur dans la page Gestion des zones réactives.

Lorsque vous ajoutez des zones réactives, vous pouvez les définir comme un écran contextuel d’aperçu rapide, un lien hypertexte ou un fragment d’expérience.

Voir Fragments d’expérience.

Les options Annuler et Rétablir, proches du coin supérieur droit de la page, sont prises en charge au cours de la session de création/modification actuelle.

Lorsque vous avez fini de créer votre image interactive, vous pouvez utiliser l’aperçu pour afficher une représentation de votre image interactive telle qu’elle s’affiche pour les clients.

Reportez-vous à la section (Facultatif) Aperçu des images interactives shoppable.

Remarque :

Lorsque vous ajoutez des zones réactives à une image dans une image interactive ou une bannière de carrousel, les informations de zone réactive sont stockées au même emplacement de métadonnées (par rapport à l’emplacement de l’image), qu’il s’agisse d’une image interactive ou d’une bannière de carrousel. Cette fonctionnalité signifie que vous pouvez facilement réutiliser la même image (avec ses données de zone réactive définies) dans les visionneuses.

Notez cependant que les bannières de carrousel prennent en charge les images à zones cliquables, qui peuvent également contenir des zones réactives. Une image interactive n’en comporte pas. Pensez-y si vous envisagez de créer une image interactive ou une bannière de carrousel qui utilise la même image. Vous pouvez créer des images interactives et des bannières de carrousel à l’aide de copies distinctes de la même image.

Voir aussi Bannières de carrousel.

Remarque :

Si vous modifiez des images interactives avec des zones réactives et que vous recadrez l’image, les zones réactives sont supprimées.

Pour ajouter des zones réactives à une bannière d’image :

  1. En mode Ressources, accédez à la bannière d’image à laquelle vous souhaitez ajouter de l’interactivité.

  2. Utilisez l’une des méthodes suivantes :

    • Dans la barre d’outils, appuyez sur Entrer la sélection, puis sélectionnez l’image. Dans la barre d’outils, appuyez sur Modifier.
    • Appuyez sur l’image pour l’ouvrir dans la page d’affichage des détails. Dans la barre d’outils, appuyez sur Modifier.
    • Pointez sur l’image, sélectionnez le menu déroulant et appuyez sur Modifier.

     

  3. Dans le coin supérieur gauche de la page, appuyez sur Ajouter une zone réactive. (Icône « toucher effectué à l’aide d’un doigt »)

  4. Dans le coin supérieur gauche de la page, appuyez sur Zone réactive.

  5. Sur l’image, appuyez sur un emplacement où vous souhaitez que la zone réactive apparaisse.

    Le cas échéant, faites glisser la zone réactive vers un nouvel emplacement. Ajoutez d’autres zones réactives, le cas échéant.

    Pour supprimer une zone réactive, dans la liste déroulante Zone réactive sélectionnée, sélectionnez le nom de la zone réactive à supprimer, puis appuyez sur Supprimer près du coin supérieur gauche de la page.

  6. Dans le champ de texte Nom, entrez le nom de la zone réactive. Ce nom s’affiche également dans la liste déroulante Zone réactive sélectionnée.

  7. Utilisez l’une des méthodes suivantes :

    • Appuyez ou cliquez sur Aperçu rapide.
      • Si vous êtes un client AEM Sites ou AEM eCommerce, appuyez ou cliquez sur l’icône de sélecteur de produit (loupe) afin d’afficher la page Sélectionner un produit. Appuyez ou cliquez sur le produit à utiliser, puis appuyez sur Sélectionner dans le coin supérieur droit de la page pour revenir à la page Gestion des zones réactives.
      •  Si vous n’êtes pas un client AEM Sites ou AEM eCommerce :
        • Reportez-vous à la section Identification des variables de zone réactive. Vous devez définir ces variables.  
        • Ensuite, entrez manuellement la valeur de la SKU. Dans le champ de texte Valeur de la SKU, entrez la SKU, qui est un identifiant unique pour chaque produit ou service que vous proposez. La valeur de la SKU entrée est renseignée automatiquement dans la partie variable du modèle d’aperçu rapide afin que le système sache associer la zone réactive sur laquelle l’utilisateur appuie et l’aperçu rapide d’une SKU spécifique.
        • (Facultatif) S’il existe d’autres variables dans l’aperçu rapide dont vous avez besoin pour identifier un produit, appuyez sur Ajouter la variable générique. Dans le champ de texte, spécifiez une variable supplémentaire. Par exemple, category = Homme est une variable ajoutée.
    • Appuyez ou cliquez sur Lien hypertexte.
      • Si vous êtes un client AEM Sites, appuyez ou cliquez sur l’icône de sélecteur de site (dossier) pour accéder à une URL. Notez que la méthode de liaison basée sur une URL n’est pas possible si votre contenu interactif contient des liens avec des URL relatives, en particulier des liens vers des pages AEM Sites.
      • Si vous êtes un client autonome, dans le champ de texte HREF, spécifiez l’URL complète vers une page web liée.

    Veillez à spécifier si vous souhaitez ouvrir le lien dans un nouvel onglet du navigateur (paramètre par défaut recommandé) ou dans le même onglet.

    Pour plus d’informations, voir Utilisation de sélecteurs.

    • Appuyez ou cliquez sur Fragment d’expérience.
      • Si vous êtes un client AEM Sites, appuyez ou cliquez sur l’icône Rechercher (loupe) afin d’ouvrir la page Fragment d’expérience. Appuyez ou cliquez sur le fragment d’expérience à utiliser, puis appuyez sur Sélectionner dans le coin supérieur droit de la page pour revenir à la page Gestion des zones réactives.
        Voir Fragments d’expérience.
      • Indiquez la largeur et la hauteur du fragment d’expérience tel qu’il apparaît dans la bannière.
  8. Appuyez sur Enregistrer.

  9. Appuyez sur Fermer pour revenir à la page Ressources.

  10. Publiez l’image interactive. La publication permet de fournir la bannière par le biais du cloud et génère également le code intégré si vous devez l’intégrer à un site web tiers.

    Voir Publication de ressources.

    Une fois que vous avez ajouté des zones réactives et publié l’image interactive, vous êtes prêt à l’ajouter à votre site web.

    Voir Ajout d’une image interactive Shoppable à la page d’entrée de votre site web

    Remarque :

    Si vous modifiez des images interactives avec des zones réactives et que vous recadrez l’image, les zones réactives sont supprimées.

(Facultatif) Aperçu des images interactives

Vous pouvez utiliser la prévisualisation pour afficher une représentation de votre image interactive, telle qu’elle s’affichera pour les clients, et tester les zones réactives de l’image pour vous assurer qu’elles se comportent de la façon escomptée.

Lorsque vous êtes satisfait de l’image interactive, vous pouvez la publier.
Reportez-vous à la section Incorporation de la visionneuse de vidéos ou d’images dans une page web.
Voir Liaison d’URL à une application web. Notez que la méthode de liaison basée sur une URL n’est pas possible si votre contenu interactif contient des liens avec des URL relatives, en particulier des liens vers des pages AEM Sites.
Reportez-vous à la section Ajout de ressources Dynamic Media aux pages.

Pour prévisualiser des images interactives :

  1. En mode Ressources, accédez à une image interactive existante que vous avez créée et appuyez pour la prévisualiser.

  2. Près du coin supérieur gauche de la page de prévisualisation, dans la liste déroulante Contenu, appuyez sur Visionneuses.

  3. Dans la liste Visionneuse, appuyez sur Shoppable_Banner ou sur le nom du paramètre prédéfini de visionneuse d’images interactives que vous avez créé.

  4. Appuyez sur les zones réactives de l’image pour tester leurs actions associées.

Publication des ressources d’images interactives

Voir Publication de ressources pour obtenir des informations sur la publication de ressources d’images interactives.

Intégration d’une image interactive à votre site web

Une fois que vous avez transféré une image de bannière, ajouté des zones réactives à l’image et publié l’image interactive, vous êtes prêt à l’ajouter dans une page de votre site web.

Si vous êtes un client AEM Sites, vous pouvez ajouter l’image interactive en faisant glisser le composant Interactive Media dans votre page. Reportez-vous à la section Ajout de ressources Dynamic Media aux pages.

Si vous êtes un client AEM Assets autonome, vous pouvez ajouter manuellement l’image interactive à votre site web, comme indiqué dans cette section.

  1. Copiez le code intégré de l’image interactive publiée.
    Reportez-vous à la section Incorporation de la visionneuse de vidéos ou d’images dans une page web.
  2. Ajoutez le code intégré copié à l’emplacement souhaité dans la page web. 
    Le code intégré copié est défini pour un environnement réactif afin qu’il s’adapte automatiquement à la zone qui lui est affectée.

Exemple

En vous servant du site web de démonstration comme exemple, procédez comme suit :

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-0.html

Notez que l’image des trois hommes est une balise IMG statique :

<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

L’intégration est très simple : supprimez la balise IMG et remplacez-la par le code incorporé copié depuis AEM Assets. Vous pouvez consulter le résultat à l’adresse URL suivante qui indique l’image interactive Shoppable sur la page par trois zones réactives en forme de cercle :

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-1.html

Remarque :

À ce stade, les zones réactives de l’image interactive Shoppable du site web de démonstration sont en mode affichage uniquement ; elles ne sont pas encore intégrées aux aperçus rapides existants.

Pour appliquer un « recadrage » à une image interactive Shoppable pour un environnement réactif, vous pouvez inclure l’attribut de configuration de l’image interactive ZoomView.iscommand au chemin d’accès, où ZoomView correspond au composant à appeler et iscommand correspond à la commande de service d’images « recadrer » que vous appliquez.

Voir l’attribut de configuration ZoomView.iscommand.

Voir Commande de service d’images crop

Vous êtes désormais prêt à intégrer l’image interactive à un aperçu rapide existant de votre site web.

Intégration d’une image interactive à un aperçu rapide existant

Remarque :

Cette tâche ne s’applique que si vous êtes un client AEM Assets autonome.

La dernière étape de cette procédure intègre l’image interactive à un aperçu rapide existant sur votre site web. Pour ce qui est de l’intégration, il n’existe pas de solution qui fonctionne dans tous les cas. Chaque mise en œuvre de l’aperçu rapide est unique, et une approche spécifique est nécessaire, ce qui implique généralement l’assistance d’un informaticien compétent en systèmes frontaux.

L’implémentation d’aperçus rapides existante représente normalement une chaîne d’actions entre-associées qui se produisent sur la page web dans l’ordre suivant :

  1. Un utilisateur déclenche un élément dans l’interface utilisateur de votre site web.
  2. Le code frontal obtient une URL d’aperçu rapide basée sur l’élément d’interface utilisateur qui a été déclenché à l’étape 1.
  3. Le code frontal envoie une demande Ajax en utilisant l’URL obtenue à l’étape 2.
  4. La logique du serveur principal renvoie les données ou le contenu de l’aperçu rapide correspondant au code frontal.
  5. Le code frontal charge les données ou le contenu de l’aperçu rapide.
  6. Facultativement, le code frontal convertit les données téléchargées de l’aperçu rapide en une représentation HTML.
  7. Le code frontal affiche une boîte de dialogue ou un panneau modal et effectue le rendu du contenu HTML à l’écran pour l’utilisateur final.

Ces appels peuvent ne pas représenter des appels d’API publiques indépendants qui peuvent être appelés par la logique de la page web depuis une étape arbitraire. À la place, il s’agit d’un appel chaîné où chaque étape suivante est masquée dans la dernière phase (rappel) de l’étape précédente.

En même temps que l’image interactive Shoppable remplace l’étape 1 et partiellement l’étape 2, lorsqu’un utilisateur clique sur une zone réactive dans l’image Shoppable, cette interaction est gérée par la visionneuse. La visionneuse renvoie un événement à la page web qui contient toutes les données des zones réactives ajoutées antérieurement à AEM Assets.

Dans ce type de gestionnaire d’événements, le code frontal effectue les opérations suivantes :

  • Écoute un événement émis par l’image interactive Shoppable.
  • Crée une URL d’aperçu rapide basée sur les données des zones réactives.
  • Déclenche le processus de chargement de l’aperçu rapide depuis le serveur principal et en effectue le rendu à l’écran.

Le code intégré renvoyé par AEM Assets comporte déjà un descripteur d’événement prêt à l’emploi, qui est commenté, comme vous pouvez le constater dans le fragment de code mis en surbrillance ci-dessous :

        var s7interactiveimageviewer = new s7viewers.InteractiveImage({
            "containerId" : "s7interactiveimage_div",
            "params" : { 
                "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
                "contenturl" : "https://aodmarketingna.assetsadobe.com/", 
                "config" : "/etc/dam/presets/viewer/Shoppable_Media",
                "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
        })
        /* // Example of interactive image event for quick view.
             s7interactiveimageviewer.setHandlers({ 
                "quickViewActivate": function(inData) {
                    var sku=inData.sku; //SKU for product ID
                    //To pass other parameter from the hotspot, you will need to add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your quickview plugin
                    //Please refer to your quickviewer plugin for the quickview call
                 }, 
             });
        */
        s7interactiveimageviewer.init();

Il suffit donc de supprimer les commentaires du code et remplacer le corps factice du gestionnaire par le code spécifique à la page web.

Le processus de création de l’URL d’aperçu rapide est presque l’opposé du processus utilisé pour identifier les variables des zones réactives décrit précédemment.

Voir Identification des variables des zones réactives.

En utilisant nos exemples précédents d’URL d’aperçu rapide, vous pouvez voir, dans les exemples suivants, comment l’URL est créée dans chaque cas :

SKU unique dans la chaîne de requête.

s7interactiveimageviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var quickViewUrl = "http://serveur/json?productId=" + inData.sku + "&amp;source=100";
     },
 });

SKU unique dans le chemin de l’URL.

s7interactiveimageviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var quickViewUrl = "http://serveur/produit/" + inData.sku;
     },
 });

SKU et ID de catégorie dans la chaîne de requête

s7interactiveimageviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var quickViewUrl = "http://serveur/quickView/product/?category=" + inData.categoryId + "&amp;prodId=" + inData.sku;
     },
 });

La dernière étape permettant de déclencher l’URL d’aperçu rapide et d’activer le panneau d’aperçu rapide requiert très probablement l’aide d’un expert informatique. Ce type d’expert sait comment déclencher avec précision l’implémentation d’aperçus rapides à partir de l’étape appropriée, en disposant d’une URL d’aperçu rapide prête à l’emploi.

Vous pouvez voir comment ces étapes sont appliquées au site web de démonstration afin d’intégrer complètement une image interactive Shoppable dans le code d’aperçu rapide. Précédemment, la structure de l’URL d’aperçu rapide a été identifiée comme suit :

/datafeed/$categoryId$-$SKU$.json

Pour reconstruire cette URL à l’intérieur du descripteur quickViewActivate, vous pouvez utiliser les champs categoryId et SKU disponibles dans l’objet inData transmis au gestionnaire par le code de la visionneuse :

var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

Le site web de démonstration déclenche la boîte de dialogue d’aperçu rapide si vous utilisez un appel de fonction loadQuickView() simple. Cette fonction n’utilise qu’un seul argument, qui est L’URL des données d’aperçu rapide. Ainsi, la dernière étape nécessaire pour intégrer l’image interactive publicitaire consiste à ajouter la ligne de code ci-dessous au gestionnaire quickViewActivate :

loadQuickView(quickViewUrl);

Voici le code source complet :

	var s7interactiveimageviewer = new s7viewers.InteractiveImage({
		"containerId" : "s7interactiveimage_div",
		"params" : { 
			"serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
			"contenturl" : "https://aodmarketingna.assetsadobe.com/", 
			"config" : "/etc/dam/presets/viewer/Shoppable_Media",
			"asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
	})
		 s7interactiveimageviewer.setHandlers({ 
			"quickViewActivate": function(inData) {
 				var sku=inData.sku;
 				var categoryId=inData.categoryId;
				var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
				loadQuickView(quickViewUrl);
			 }, 
		 });
	s7interactiveimageviewer.init();

Le dernier site web de démonstration avec l’image interactive totalement intégrée se présente comme suit :

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-banner/we-fashion/landing-3.html

Utilisation d’aperçus rapides en vue de la création de fenêtres contextuelles

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne