Images interactives

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 sélectionner ces zones réactives et être directement liés au produit ou au service, l’ajouter à un panier ou être associés à une page web. Les expériences directes de ce type augmentent les engagements des clients et les conversions sur votre site web.

Voici une bannière publicitaire avec une fenêtre contextuelle d’aperçu rapide. Un utilisateur active l’aperçu rapide en sélectionnant le cercle ou la "zone réactive" sur le modèle.

chlimage_1-152

Voir 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?lang=fr

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

Suivez la présentation de la création des bannières d’images interactives (10 minutes et 33 secondes). Apprenez également à prévisualiser, modifier et diffuser des bannières d’images interactives.

Démarrage rapide : images interactives

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

Recherchez le titre Exemple dans certaines tâches de démarrage rapide. Il contient un court tutoriel reposant 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?lang=fr

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

Étapes des images interactives :

  1. (Facultatif) Identifiez les variables de zone réactive. Si vous utilisez des instances autonomes de Experience Manager Assets et de Dynamic Media, commencez par identifier les variables dynamiques utilisées dans votre mise en oeuvre existante de l’aperçu rapide. Vous pouvez ensuite saisir des données de zone réactive lors de la création de l’image interactive. Voir (Facultatif) Identification des variables de zone réactive.
    Toutefois, si vous utilisez Adobe Experience Manager Sites, Adobe Experience Manager eCommerce ou les deux, cette étape n’est pas nécessaire.
    Voir Concepts de commerce électronique dans Experience Manager Assets.

  2. (Facultatif) Créer 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.
    Voir (Facultatif) Création d’un paramètre prédéfini de visionneuse d’images interactives.

  3. Télécharger une bannière d’image : téléchargez les bannières d’image que vous souhaitez rendre interactives.
    Voir Chargement d’une bannière d’image.

  4. Ajouter des 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 telle qu’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.

  5. Ajout d’une image interactive à votre site web : si vous utilisez des sites Experience Manager ou eCommerce, ou les deux, vous pouvez ajouter l’image interactive à une page web dans Experience Manager. Faites glisser le composant Interactive Media sur la page. Voir Ajout de ressources Dynamic Media aux pages.

    Si vous utilisez des ressources Experience Manager et des instances autonomes de Dynamic Media, vous devez copier le code incorporé sur votre site web, puis l’intégrer à votre aperçu rapide existant. Voir 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. Voir Intégration d’une image interactive à 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 l’aperçu rapide.
  • Votre mise en oeuvre de Experience Manager n’utilise pas une structure d’intégration de commerce électronique pour extraire des données de produit dans Experience Manager à partir de n’importe quelle solution de commerce électronique, comme IBM® WebSphere® Commerce, Elastic Path, Hybris ou Intershop. Voir Concepts de commerce électronique dans Experience Manager Assets.

Si votre mise en œuvre d’Experience Manager utilise l’e-commerce, 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 Experience Manager Assets, vous devez affecter un SKU (unité de gestion des stocks) 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 est parfois suffisant de consulter les spécialistes informatiques responsables de l’implémentation de l’aperçu rapide existant. Les spécialistes informatiques sont susceptibles de connaître le jeu minimum de données requis pour l’identification de l’aperçu rapide dans le système. Cependant, il est également possible d’analyser le comportement existant du code en front-end.

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

  • L’utilisateur active un élément d’interface utilisateur sur le site web. Par exemple, en sélectionnant un 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 en front-end effectue le rendu visuel de ce contenu à l’écran.

L’approche consiste ensuite à visiter différentes zones du site web existant sur lesquelles la fonction d’aperçu rapide est mise en oeuvre. Ensuite, vous déclenchez l’aperçu rapide et capturez 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 :

  • Pour afficher toutes les requêtes HTTP sortantes dans Google Chrome, appuyez sur F12 pour ouvrir le panneau Outils de développement, puis sélectionnez l’onglet Réseau.
    Sur Mac, appuyez sur Commande+Option+I pour ouvrir le panneau Outils de développement, puis sélectionnez l’onglet Réseau.

  • Dans Firefox, vous pouvez activer le plug-in Firebug en appuyant sur F12 et utiliser l’onglet Réseau, ou utiliser l’outil Inspecteur intégré et son onglet Réseau.
    Sur Mac, appuyez sur Commande+Option+I pour ouvrir le panneau Outils de développement, puis sélectionnez l’onglet Inspecteur.

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. En règle générale, lorsque vous déclenchez l’aperçu rapide, de nombreuses 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. En effet, les URL d’aperçu rapide peuvent comporter 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 du 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 plus du SKU, tels que l’ID de catégorie, le code couleur et le code de taille. Dans ce cas, chaque élément est une variable distincte dans votre définition de données d’images interactives dans la fonctionnalité d’image interactive publicitaire d’Experience Manager Assets.

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

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

Les URL d’aperçu rapide enregistrées incluent ce qui suit :

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

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

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

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

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

SKU unique, trouvé dans le chemin d’accès à l’URL.

Les URL d’aperçu rapide enregistrées incluent ce qui suit :

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

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

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

Les URL d’aperçu rapide enregistrées incluent ce qui suit :

  • https://server/quickView/product/?category=1100004&prodId=305466

  • https://server/quickView/product/?category=1100004&prodId=310181

  • https://server/quickView/product/?category=1740148&prodId=308706

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

Les zones réactives sont définies sous forme de paires. Autrement dit, une valeur de SKU et une variable supplémentaire appelée « categoryId ». Les paires obtenues sont les suivantes :

  • Le SKU est 305466 et categoryId est 1100004.

  • Le SKU est 310181 et categoryId est 1100004.

  • Le 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://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=fr?lang=fr

La page web de démonstration présente plusieurs vignettes de produit, chacune d’entre elles disposant d’un bouton d’aperçu rapide libellé « Plus ». L’outil de débogage de votre navigateur web étant toujours activé, sélectionnez chaque bouton et notez les URL d’aperçu rapide enregistrées. Une fois que vous avez activé les quatre aperçus rapides de produit disponibles sur la page, la liste suivante des demandes d’aperçu rapide est envoyée au serveur principal :

  • /datafeed/Male-Windbreaker.json
  • /datafeed/Male-SimpleHenley.json
  • /datafeed/Male-CamoPullover.json
  • /datafeed/Female-QuiltedDownJacket.json

En examinant les appels au 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 :

  • Le premier type est Masculin ou Féminin. Vous pouvez l’appeler « catégorie de produits ».
  • Le second type correspond au nom du produit, comme « CamoPullover ». Vous pouvez supposer que ces informations sont le 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 à charger une bannière d’image et à y ajouter des zones réactives à l’aide de la fonctionnalité d’images interactives Shoppable d’Experience Manager Assets.

(Facultatif) Créez 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é « Shoppable_Banner », qui est fourni avec Experience Manager 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 Experience Manager 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. Cette règle s’applique aux 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, accédez à Outils > Ressources > Paramètres prédéfinis de la visionneuse.

  2. Près du coin supérieur droit de la page, sélectionnez Créer.

  3. Dans la boîte de dialogue Nouveau paramètre prédéfini de la visionneuse, saisissez un nom pour décrire le paramètre prédéfini de visionneuse de bannières interactives.

    Le titre apparaît dans la page de liste des paramètres prédéfinis de la visionneuse après l’enregistrement.

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

  5. Sélectionnez Créer.

  6. Sur la page Modifier le paramètre prédéfini de la visionneuse, sélectionnez l’onglet Apparence .

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

    • Pour télécharger votre propre image de zone réactive que vous souhaitez utiliser sur les images, cliquez sur l’icône Sélecteur de ressources . Sur la page Sélectionner le contenu , accédez à l’image de zone réactive à utiliser, sélectionnez-la, puis sélectionnez 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, sélectionnez l’icône Galerie de zones réactives . Dans la palette de la galerie de zones réactives, sélectionnez l’image de zone réactive à utiliser.
  8. Près du coin supérieur droit de la page, sélectionnez 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 à charger une bannière d’image.

Chargez une bannière d’image

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:

  1. Chargez les bannières d’images que vous souhaitez rendre interactives.

    Voir la section 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.

REMARQUE

Les outils de partage sur les réseaux sociaux ne sont pas pris en charge dans l’image interactive lorsque vous incorporez la visionneuse dans un fragment d’expérience. Pour contourner ce problème, vous pouvez utiliser ou créer des paramètres prédéfinis de visionneuse qui ne disposent pas d’outils de partage sur les médias sociaux. Ces paramètres prédéfinis de visionneuse vous permettent de l’incorporer dans des 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.

Voir (Facultatif) Aperçu des images interactives.

REMARQUE

Lorsque vous ajoutez des zones réactives à une image dans une image interactive ou une bannière de carrousel, les informations de ces zones sont stockées au même emplacement de métadonnées. Cet emplacement est relatif à 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 réutiliser facilement la même image (avec ses données de zone réactive définies) dans les visionneuses.
Les bannières de carrousel prennent en charge les zones cliquables sur les images qui peuvent également contenir des zones réactives ; pas d’images interactives. Gardez cette règle à l’esprit 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 :

    • Pointez sur l’image, puis sélectionnez Sélectionner (icône de coche). Dans la barre d’outils, sélectionnez Modifier.

    • Pointez sur l’image, puis sélectionnez Autres actions (icône représentant trois points) Modifier.

    • Sélectionnez l’image pour pouvoir l’ouvrir dans la page Affichage des détails . Dans la barre d’outils, sélectionnez Modifier.

  3. Près du coin supérieur gauche de la page, sélectionnez Ajouter une zone réactive (icône d’appui à l’aide du doigt) pour ouvrir la page de gestion des zones réactives.

  4. Près du coin supérieur gauche de la page, sélectionnez Zone réactive.

    1. Près du coin supérieur gauche de la page Gestion des zones réactives, sélectionnez Zone réactive.
    2. Sur l’image, sélectionnez l’emplacement où vous souhaitez que la zone réactive s’affiche. Si nécessaire, faites glisser la zone réactive pour en ajuster l’emplacement.
    3. Ajoutez des zones réactives supplémentaires si nécessaire en répétant les étapes a et b.
    4. (Facultatif) Pour supprimer une zone réactive, sélectionnez-la sur l’image, puis sélectionnez Supprimer (icône de corbeille) sous l’en-tête Zones réactives.
  5. 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.

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

    • Sélectionnez Aperçu rapide.

      • Si vous êtes client Sites ou eCommerce Experience Manager, sélectionnez l’icône Sélecteur de produit (loupe) pour ouvrir la page Sélectionner un produit . Sélectionnez le produit à utiliser, puis Sélectionnez dans le coin supérieur droit de la page afin de revenir à la page de gestion des zones réactives.

      • Si vous n’êtes pas client Experience Manager Sites ou eCommerce :

        • Voir Identification des variables de zone réactive; vous devez définir ces variables.
        • Ensuite, entrez manuellement la valeur de SKU. Dans le champ de texte Valeur de SKU, entrez la SKU, qui est un identifiant unique pour chaque produit ou service que vous proposez. La valeur de 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 sélectionnée à l’aperçu rapide d’un SKU spécifique.
        • (Facultatif) S’il existe d’autres variables dans l’aperçu rapide que vous devez utiliser pour identifier un produit, sélectionnez Ajouter la variable générique. Dans le champ de texte, spécifiez une variable supplémentaire. Par exemple, category=Males est une variable ajoutée.
    • Sélectionnez Lien hypertexte.

      • Si vous êtes client Sites Experience Manager, sélectionnez l’icône Sélecteur de site (dossier) pour accéder à une URL. 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 Experience Manager 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.

    Voir Utilisation de sélecteurs pour plus d’informations.

    • Sélectionnez Fragment d’expérience.

      • Si vous êtes client Sites Experience Manager, sélectionnez l’icône Rechercher (loupe) pour ouvrir la page Fragment d’expérience. Sélectionnez le fragment d’expérience à utiliser, puis Sélectionnez dans le coin supérieur droit de la page afin de revenir à la page de gestion des zones réactives.
        Voir Fragments d’expérience.

      • Indiquez la largeur et la hauteur du fragment d’expérience tel que vous souhaitez qu’il apparaisse dans la bannière.

        REMARQUE

        Les outils de partage sur les réseaux sociaux ne sont pas pris en charge dans l’image interactive lorsque vous incorporez la visionneuse dans un fragment d’expérience. Pour contourner ce problème, vous pouvez utiliser ou créer des paramètres prédéfinis de visionneuse qui ne disposent pas d’outils de partage sur les médias sociaux. Ces paramètres prédéfinis de visionneuse vous permettent de l’incorporer dans des fragments d’expérience.

  7. Sélectionnez Enregistrer pour enregistrer votre travail et revenir à la page Parcourir.

  8. Publiez l’image interactive. La publication permet à la bannière d’être diffusée par le cloud et génère également du code incorporé 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 Intégration d’une image interactive à 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 l’aperçu pour afficher une représentation de votre image interactive telle qu’elle s’affiche pour les clients et tester les zones réactives de l’image afin de vous assurer qu’elles se comportent comme prévu.

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. 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 Experience Manager Sites.
Voir Ajout de ressources Dynamic Media aux pages.

Pour prévisualiser des images interactives:

  1. Dans la vue Ressources, accédez à une image interactive existante que vous avez créée et sélectionnez-la pour l’ouvrir dans Aperçu.
  2. Près du coin supérieur gauche de la page Aperçu, dans la liste déroulante Contenu, sélectionnez Visionneuses.
  3. Dans la liste Visionneuses, sélectionnez Shoppable_Banner ou le nom du paramètre prédéfini de visionneuse d’images interactives que vous avez créé.
  4. Sélectionnez des zones réactives sur l’image si vous souhaitez tester les actions associées.

Publication de ressources d’images interactives

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

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

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 un client Experience Manager Sites, vous pouvez ajouter l’image interactive en faisant glisser le composant Interactive Media dans votre page. Voir Ajout de ressources Dynamic Media aux pages.

Si vous êtes un client Experience Manager 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.
    Voir 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://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=fr?lang=fr

Notez que l’image des trois mâles 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 revient simplement à supprimer la balise IMG et à la remplacer par le code intégré copié à partir d’Experience Manager Assets. Vous pouvez voir le résultat dans l’URL suivante qui affiche 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?lang=fr

REMARQUE

À ce stade, les zones réactives de l’image interactive Shoppable du site web de démonstration sont à des fins d’affichage uniquement ; ils ne sont pas encore intégrés à l’aperçu rapide existant.

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. Le composant ZoomView est appelé et iscommand est la commande de service d’images "crop" que vous appliquez.

Voir l’attribut de configuration ZoomView.iscommand.

Voir la 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 dans un aperçu rapide existant

REMARQUE

Cette tâche ne s’applique que si vous êtes un client Experience Manager 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 oeuvre d’aperçu rapide est unique et une approche spécifique est nécessaire. Cela 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 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 en front-end 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. Le code frontal convertit éventuellement les données téléchargées de l’aperçu rapide en une représentation HTML.
  7. Le code en front-end 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 ne représentent pas des appels d’API publics indépendants qui peuvent être appelés par la logique de page web à partir d’une étape arbitraire. Il s’agit plutôt 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 sélectionne 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 Experience Manager Assets.

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

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

Le code incorporé renvoyé par Experience Manager 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 l’opposé du processus d’identification des variables de zone réactive décrit précédemment.

Voir Identification des variables de zone réactive.

En utilisant les 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 :

SKU unique, trouvé dans la chaîne de requête

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

SKU unique, trouvé dans le chemin d’accès à l’URL

s7interactiveimageviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });

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

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

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 à partir 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. Plus tôt dans cette rubrique, la structure de l’URL de l’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 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 totalement intégrée se présente comme suit :

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

Utilisation de l’aperçu rapide pour créer des fenêtres contextuelles personnalisées

Voir Création de fenêtres contextuelles personnalisées à l’aide de l’aperçu rapide.

Sur cette page