Images interactives interactive-images

Vous pouvez facilement créer des expériences riches et attrayantes pour vos clients à partir d’images statiques en ajoutant des zones réactives « shoppable » aux images par glisser-déposer. Les zones réactives Shoppable rassemblent des informations supplémentaires sur un produit ou un service avec une fonctionnalité directe de point de vente de type « Ajouter au panier » ou « Acheter ». Les clients peuvent appuyer sur ces zones réactives et être liés directement au produit ou au service, l’ajouter à un panier ou être associés à une page web. Les expériences directes de ce type augmentent 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.

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

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion-QVzoom/index2-shoppable.html?lang=fr

Découvrir comment les bannières d’images interactives sont créées watch-how-interactive-image-banners-are-created

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 quick-start-interactive-images

La description suivante du workflow é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 court tutoriel basé sur l’exemple de page web suivant qui ne contient pas encore d’images interactives :

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=fr

Le tutoriel permet d’illustrer les étapes de l’intégration d’images interactives à votre propre site web.

Workflow Images interactives:

(Facultatif) Identification des variables de zone réactive optional-identifying-hotspot-variables

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 (unité de gestion des stocks ; un identifiant unique pour chaque produit ou service distinct que vous fournissez) et des variables supplémentaires facultatives à chaque zone réactive. Ces variables de zones réactives sont utilisées ultérieurement pour faire correspondre ces zones réactives avec du contenu d’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.

Il peut parfois être nécessaire de consulter les spécialistes informatiques responsables de l’implémentation d’aperçu rapide existante, car ils connaissent probablement le jeu minimum de données nécessaires pour identifier l’aperçu rapide dans le système. Cependant, dans la plupart des cas, il est également possible d’analyser simplement le comportement existant du code frontal.

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

L’approche consiste ensuite à visiter différentes zones du site web existant où la fonction d’aperçu rapide est mise en oeuvre, à déclencher l’aperçu rapide et à capturer l’URL Ajax envoyée par la page web pour le chargement des données ou du 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 correct. Vous trouverez ci-dessous quelques exemples de navigateurs web qui incluent des inspecteurs web :

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

Vous trouvez maintenant l’URL Ajax d’aperçu rapide dans le journal réseau. Copiez l’URL enregistrée pour l’analyse ultérieure. Dans la plupart des cas, lorsque vous déclenchez l’aperçu rapide, plusieurs requêtes sont envoyées au serveur. En règle générale, l’URL Ajax d’aperçu rapide est l’une des premières dans la liste. Elle possède une partie de chaîne de requête complexe ou un chemin d’accès, et son type de réponse MIME est text/html, text/xml ou text/javascript.

Au cours de ce processus, il est important de parcourir différentes zones de votre site web, avec différentes catégories et types de produits. C’est pourquoi les URL d’aperçu rapide peuvent avoir des parties communes pour une catégorie de site web donnée, mais ne changent que si vous visitez une autre zone du site web.

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

Cependant, dans les cas complexes, l’URL d’aperçu rapide comporte différents éléments variables en complément du SKU, comme l’identifiant de la catégorie, le code couleur, le code taille, etc. Dans ce cas, chaque élément est une variable distincte dans votre définition de données de zone réactive dans la fonction d’image interactive Shoppable d’AEM Assets.

Examinez les exemples suivants d’URL d’aperçu rapide et les variables de zone réactive qui en résultent :

Exemple

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

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=fr

La page web de démonstration comporte plusieurs miniatures de produit, chacune disposant d’un bouton d’aperçu rapide intitulé "Aperçu rapide". Voir Plus. À l’aide de l’outil de débogage de votre navigateur web toujours activé, cliquez sur chaque bouton et notez les URL d’aperçu rapide enregistrées. Après avoir activé les quatre aperçus rapides de produit disponibles sur la page, la liste suivante de demandes d’aperçu rapide est envoyée au serveur principal :

En examinant ces appels de serveur, vous voyez que les informations spécifiques au produit ne sont présentes que dans le chemin de 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 :

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 à 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 optional-creating-an-interactive-image-viewer-preset

Vous pouvez choisir d’utiliser le paramètre prédéfini de visionneuse d’images interactives par défaut, appelé 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 le paramètre prédéfini de visionneuse enregistré, il est automatiquement activé sur la Paramètre prédéfini de la visionneuse page de liste dans AEM Assets. Cette fonctionnalité signifie qu’elle est visible dans le composant Interactive Media et chaque fois que vous affichez une ressource. Toutefois, pour delivery une bannière interactive avec ce paramètre prédéfini de visionneuse, vous devez publier votre paramètre prédéfini de visionneuse (c’est également le cas 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:

Chargement d’une bannière d’image uploading-an-image-banner

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

Pour charger une bannière d’image  :

Ajout de zones réactives à une bannière d’image adding-hotspots-to-an-image-banner

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

Lorsque vous ajoutez des zones réactives, vous pouvez les définir comme un affichage contextuel d’aperçu rapide, comme lien hypertexte ou comme 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. ​ ​

Une fois la création de votre image interactive terminée, vous pouvez utiliser Aperçu pour afficher une représentation de votre image interactive telle qu’elle s’affichera pour les clients.

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

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

(Facultatif) Aperçu des images interactives optional-previewing-interactive-images

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.
Voir 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  :

Publication des ressources d’images interactives publishing-interactive-image-assets

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 integrating-an-interactive-image-with-your-website

Une fois que vous avez chargé 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 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 client AEM Assets autonome, vous pouvez ajouter manuellement l’image interactive à votre site web, comme indiqué dans cette section.

Exemple

Utiliser le site web de démonstration comme exemple :

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=fr

Remarquez que la photo des trois hommes est statique. IMG tag :

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

L’intégration revient simplement à supprimer la balise IMG et à la remplacer par le code intégré copié à partir d’AEM Assets. Vous pouvez voir le résultat dans l’URL suivante qui montre l’image interactive shoppable sur la page avec trois zones réactives en cercle :

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-1.html?lang=fr

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 est le composant à appeler et iscommand est la commande de service d’images de recadrage que vous appliquez.

Voir l’attribut de configuration ZoomView.iscommand.

Voir la commande de service d’images crop.

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

Intégration d’une image interactive dans un aperçu rapide existant integrating-an-interactive-image-with-an-existing-quickview

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 oeuvre d’aperçu rapide est unique et une approche spécifique est nécessaire, qui implique probablement l’assistance d’un informaticien compétent.

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

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.

Au même moment 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 utilisateur 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 précédemment dans AEM Assets.

Dans ce type de gestionnaire d’événements, le code en front-end effectue les opérations suivantes :

Le code incorporé renvoyé par AEM Assets dispose déjà d’un gestionnaire d’événements prêt à l’emploi qui est commenté, comme illustré dans le fragment de code mis en surbrillance suivant :

        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 Quickview.
             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 de 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 essentiellement l’opposé du processus utilisé pour identifier les variables de zone réactive 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 d’aperçu rapide est créée dans chaque cas :

La dernière étape pour déclencher l’URL d’aperçu rapide et activer le panneau d’aperçu rapide nécessite probablement l’assistance d’un informaticien compétent de votre service informatique. Celui-ci sait comment déclencher précisément l’implémentation de l’aperçu rapide à l’aide de l’étape appropriée, avec une URL d’aperçu rapide prête à l’emploi.

Vous pouvez découvrir comment ces étapes sont appliquées au site web de démonstration pour l’intégration complète d’une image interactive publicitaire avec le code d’aperçu rapide. Auparavant, la structure de l’URL d’aperçu rapide était 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 simple appel de la fonction loadQuickView(). Cette fonction n’accepte 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 Shoppable 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 entièrement intégrée ressemble à ce qui suit :

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-3.html?lang=fr

Utilisation d’aperçus rapides pour créer des fenêtres contextuelles personnalisées using-quickviews-to-create-custom-pop-ups

Voir Création de fenêtres contextuelles personnalisées à l’aide d’aperçus rapides.