Vous consultez actuellement l'aide de la version:

Il est facile de créer des vidéos interactives qui poussent la conversion directement à partir de la vidéo. L’engagement du client avec la vidéo a lieu dans un panneau à côté du lecteur vidéo où les miniatures pour les services, informations ou produits défilent à l’affichage en fonction de ce qui figure dans la vidéo. Les clients peuvent appuyer sur la miniature et être connectés directement au service, ajouter l’article dans un panier pour achat immédiat ou être dirigés vers une page Web pour plus d’informations.

Une fois la vidéo terminée, un récapitulatif visuel de toutes les offres s’affiche pour pousser vers un appel à l’action. Les clients disposent d’une autre opportunité d’appuyer sur l’article qu’ils désirent. Des expériences pratiques et spécifiques telles que celles-ci augmentent l’engagement du client ainsi que la conversion.

Voir aussi Images interactives.

Vidéos interactives à l’œuvre

Cliquez sur la capture d’écran ci-dessous pour visionner une vidéo interactive dans son intégralité.

Pendant la lecture, lorsque les produits sont utilisés dans la vidéo, le produit identique s’affiche à droite sous forme de vignette.

Cliquez sur la vignette pour suspendre la vidéo et ouvrez l’aperçu rapide du produit. Par exemple, cliquez sur la vignette du KitchenAid pour afficher le mixeur avec une option de rotation à 360 degrés ou utilisez le zoom pour afficher les détails du mixeur.

Appareils électroménagers – Vidéo de démonstration interactive

Remarque :

Si vous créez une vidéo interactive pour lancer une page web lorsqu’un utilisateur clique sur une vignette, certains dispositifs bloquent l’ouverture de la page web contextuelle. Dans ce cas, vous devez modifier le paramètre de blocage des fenêtres contextuelles sur le dispositif. Par exemple, sur un Apple iPhone 6, appuyez sur Paramètres > safari > Bloquer les fenêtres contextuelles, puis faites glisser la commande sur Désactivé. À présent, lorsque vous visionnez une vidéo interactive et que vous cliquez sur une vignette, vous êtes invité à ouvrir la fenêtre contextuelle. Si vous acceptez, la page web s’affiche.

Découvrez comment les vidéos interactives sont créées

Visionnez une présentation vidéo de 7 minutes 30 sur la création des vidéos interactives.
(Même si la présentation vidéo est personnalisée grâce aux ressources à la demande, les principes et les étapes restent compatibles avec les vidéos interactives dans AEM Assets.)

Webinaire « Succès des clients Adobe »

Le webinaire « Utilisation de la vidéo interactive, du partage de liens et du partage sur YouTube dans AEM Assets » explique comment utiliser la vidéo interactive et d’autres fonctionnalités pour lier des événements dépendant de la conversion dans votre contenu marketing vidéo.

Démarrage rapide : vidéos interactives

La description du processus étape par étape qui suit est conçue pour vous aider à démarrer et à utiliser rapidement les vidéos interactives dans Dynamic Media.

Recherchez le titre Exemple dans certaines tâches de démarrage rapide. Il contient un court didacticiel lié à la page web de démonstration suivante :

https://marketing.adobe.com/resources/help/en_US/aod/shop-video/landing-0.html

L’aide Exemples aide à illustrer les étapes d’intégration des vidéos interactives à votre site web.

Étapes de la vidéo interactive :

  1. (En option) Identification de variables Aperçu rapide : commencez par identifier les variables dynamiques utilisées par votre mise en œuvre de l’aperçu rapide existant. Vous utilisez des variables pour mapper de vignettes de produit à l’aperçu rapide du produit correspondant lorsque vous créez votre vidéo interactive.
    Reportez-vous à la section (En option) Identification de variables Aperçu rapide.
    Notez que cette étape n’est nécessaire que si toutes les conditions suivantes sont vraies :
    vous souhaitez ajouter de l’interactivité à votre vidéo 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.
  2. (Facultatif) Création d’un paramètre prédéfini de visionneuse de vidéos interactives : personnalisez l’aspect et le comportement des différents composants qui constituent la visionneuse, comme la barre vidéo et les vignettes interactives.
    Vous n’avez pas besoin de créer votre propre paramètre prédéfini de visionneuse de vidéos interactives si vous envisagez plutôt d’utiliser les paramètres prédéfinis de visionneuse de vidéos interactives Shoppable_Video_Dark ou Shoppable_Video_Dark.
    Reportez-vous aux sections (Facultatif) Création d’un paramètre prédéfini de visionneuse et Aspects spéciaux de la création d’un paramètre prédéfini de visionneuse de vidéos interactives.
  3. Téléchargement d’une vidéo et des ressources d’image associées : transférez une vidéo et les images associées auxquelles vous souhaitez ajouter de l’interactivité.
    Reportez-vous à la section Téléchargement d’une vidéo et de ses ressources miniatures associées.
  4. Ajout d’interactivité à votre vidéo : ajoutez un ou plusieurs segments temporels à la vidéo. Ensuite, associez les vignettes dans ces segments temporels. Affectez chaque vignette à une action, comme un lien hypertexte ou un aperçu rapide. Terminez en publiant la vidéo interactive. La publication crée le code intégré ou l’URL que vous copiez et appliquez à la fin dans la page d’entrée de votre site web.
    Reportez-vous à la section Ajout d’interactivité à votre vidéo.
  5. Ajout d’une vidéo interactive à votre site web ou à votre site web dans AEM
    Si vous utilisez AEM Sites ou AEM eCommerce, ou les deux, vous pouvez ajouter la vidéo interactive directement à 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.
    Utilisez le code intégré ou l’URL pour intégrer votre vidéo interactive aux expériences de votre site web. Reportez-vous à la section Intégration d’une vidéo 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 vidéo interactive dans un aperçu rapide existant.

(En option) Identification de variables Aperçu rapide

Remarque :

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

  • Vous souhaitez ajouter de l’interactivité à votre vidéo 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 eCommerce, 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 existante d’aperçu rapide pour faire correspondre les miniatures de produits à l’aperçu rapide des produits correspondants lors du processus de création de vidéo interactive.

Lorsque vous ajoutez des segments de temps à une vidéo, vous attribuez un SKU ainsi que toute variable supplémentaire à chaque miniature que vous ajoutez à un segment. Ces variables sont utilisées ultérieurement pour afficher le produit Aperçu rapide correct.

Il est important d’identifier correctement les variables qui sont requises pour déclencher de manière unique l’Aperçu rapide d’un produit.

Il est parfois suffisant de consulter les spécialistes informatiques responsables de votre mise en œuvre d’aperçu rapide existante. Il connaissent probablement l’ensemble de données minimum qui est nécessaire pour identifier Aperçu rapide dans le système. Toutefois, dans la plupart des cas, il est également possible d’analyser simplement le comportement existant du code frontal.

La majorité des implémentation 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, par conséquent, consiste à visiter différentes zones de votre site Web existant où l’aperçu rapide est mis en œuvre, de déclencher l’aperçu rapide et de 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 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 vous pouvez utiliser l’outil Inspecteur intégré et son onglet Réseau.
  • Dans Internet Explorer, activez l’outil de débogage en appuyant sur F12.

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 cas le plus simple, la seule partie variable dans l’URL de l’aperçu rapide est la SKU du produit. Dans ce cas, la valeur de la SKU du produit est la seule donnée nécessaire à l’ajout de vignettes sur un segment temporel dans la vidéo interactive dans AOD.

Cependant, dans les cas complexes, l’URL d’aperçu rapide comporte différents éléments variables en complément de la SKU du produit, comme l’identifiant de la catégorie, le code couleur, etc. Dans ce cas, chaque élément de ce type est une variable distincte dans la définition des données de vignette dans AOD.

Consultez les exemples d’URL d’aperçu rapide et les variables de vignettes qui en résultent ci-dessous :

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

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

  • 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 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, seuls les champs de SKU de nos vignettes doivent être renseignés avec des valeurs comme 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 :

  • http://server/product/6422350843

  • http://server/product/1607745002

  • http://server/product/0086724882

La partie variable se trouve dans la dernière partie du chemin et elle devient la valeur de SKU des vignettes : 6422350843, 1607745002, 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 :

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

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

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

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

Par conséquent, les définitions des vignettes sont des paires. Autrement dit, une valeur de SKU et une variable supplémentaires appelée « categoryId ». Les paires obtenues sont les suivantes :

  • Le SKU est 305466 et categoryId est 1100004
  • SKU est 310181 et le paramètre categoryId a pour valeur 1100004
  • Le SKU est 308706 et categoryId est 1740148

 

Exemple

Lorsque l’approche ci-dessus est appliquée à notre exemple de site web, la page web comporte différentes vignettes de produit, auxquelles est associé un bouton « AFFICHER PLUS » :

https://marketing.adobe.com/resources/help/en_US/aod/shop-video/landing-0.html

Une fois que vous avez activé l’aperçu rapide de tous les produits disponibles dans la page, vous obtenez la liste de demandes d’aperçu rapide exécutées en arrière-plan ci-dessous :

  • datafeed/candles-233396346.json
  • datafeed/candles-233978050.json
  • datafeed/candles-234024346.json
  • datafeed/candles-234024356.json
  • datafeed/candles-234024359.json
  • datafeed/cushions-233939848.json
  • datafeed/cushions-234019477.json
  • datafeed/cushions-234019483.json
  • datafeed/furniture-231747479.json
  • datafeed/furniture-232625621.json
  • datafeed/furniture-232625626.json
  • datafeed/furniture-233939810.json
  • datafeed/furniture-233939825.json
  • datafeed/furniture-233939828.json
  • datafeed/furniture-233939853.json
  • datafeed/furniture-233940334.json
  • datafeed/glassware-000064007.json
  • datafeed/glassware-230722193.json
  • datafeed/glassware-233916550.json
  • datafeed/glassware-233916597.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 concerne les bougies, les coussins, les meubles et la verrerie. Vous pouvez l’appeler « catégorie de produits ».
  • Le second type est un code de produit, comme 233916597. Vous pouvez considérer qu’il s’agit de 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

En fonction de cette analyse, vous concluez que vous pouvez utiliser les deux variables ci-dessous pour les vignettes : categoryId et SKU.

Vous êtes maintenant prêt à transférer une vidéo et les ressources de vignette associées.

(En option) Création d’un paramètre prédéfini de la visionneuse de vidéo interactive

Vous pouvez ignorer cette tâche et passer à la tâche suivante si vous envisagez d’utiliser les types de paramètres prédéfinis de visionneuse de vidéos interactives par défaut, prêtes à l’emploi, Shoppable_Video_dark ou Shoppable_Video_light.

Lorsqu’une vignette est sélectionnée dans l’environnement de création, un aperçu de la boîte de dialogue Aperçu rapide s’affiche.

 

chlimage_1

Vous avez la possibilité de créer votre propre paramètre prédéfini de visionneuse de vidéos interactives personnalisé. Vous pouvez déterminer, entre autres, le style de la visionneuse de vidéos, les vignettes interactives et l’affichage sous forme de grille des vignettes, qui s’affiche à la fin de la vidéo.

Un paramètre prédéfini de la visionneuse de vidéo interactive rend correctement la vidéo, ainsi que tous les segments de frise chronologique que vous avez ajoutés. Il utilise également un exemple d’aperçu rapide par défaut lorsque vous cliquez sur une miniature de produit en mode Aperçu, pour vous permettre de tester son interactivité avant sa publication.

Une fois le paramètre prédéfini de la visionneuse enregistré, son état est automatiquement définit sur On (Activé) dans la page Paramètres prédéfinis de la visionneuse. Cet état signifie qu’il est visible dans le composant Dynamic Media et chaque fois que vous prévisualisez une vidéo avec ce paramètre prédéfini. Veillez à également publier manuellement votre nouveau paramètre prédéfini de visionneuse.

Pour créer votre propre paramètre prédéfini de visionneuse de vidéos interactives, reportez-vous à la section Création d’un paramètre prédéfini de visionneuse.

Téléchargement d’une vidéo et de ses ressources miniatures associées.

Si vous avez déjà téléchargé votre vidéo et les ressources miniatures, passez à la section Ajout d’interactivité à votre vidéo.

Pour télécharger une vidéo et ses ressources miniatures associées :

  1. Téléchargez la vidéo et les ressources miniatures associées dans le dossier ou les dossiers de votre choix.

    Voir Téléchargement de ressources.
    Voir Téléchargement de ressources à l’aide de la planification de tâches FTP.

    Ajoutez maintenant l’interactivité à votre vidéo.

Ajout d’interactivité à votre vidéo

Vous ajoutez des segments de frise chronologique à une vidéo à l’aide de l’éditeur visuel intégré sur la page Créer une vidéo interactive.

Une fois les segments de frise chronologique ajoutés, vous ajoutez les images miniatures dans chaque segment. Pour chaque miniature que vous ajoutez, vous lui appliquez une action. Par exemple, vous pouvez appliquer un aperçu rapide à une miniature ou lui attribuer un lien hypertexte.

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 votre vidéo interactive enregistrée, elle s’ouvre immédiatement dans Aperçu. De là, vous pouvez sélectionner un paramètre prédéfini de la visionneuse de vidéo interactive et lire la vidéo pour afficher une représentation approximative de la manière dont elle se présentera aux clients.

Pour ajouter de l’interactivité à votre vidéo :

  1. En mode Ressources, accédez à la vidéo que vous avez téléchargée et que vous souhaitez rendre interactive.

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

    • Dans la barre d’outils, appuyez sur Entrer la sélection, puis sélectionnez la vidéo. Dans la barre d’outils, appuyez sur Modifier.
    • Appuyez sur la vidéo pour l’ouvrir dans la page Paramètres prédéfinis de la visionneuse. Dans la barre d’outils, appuyez sur Modifier.
  3. Dans la page Créer une vidéo interactive, procédez comme suit :

    • Appuyez sur le bouton Lire pour démarrer la lecture de la vidéo. Lorsqu’un produit, service ou détail particulier que vous souhaitez mettre en évidence s’affiche, appuyez sur Ajouter un segment dans la barre d’outils. Répétez tant que vous n’avez pas atteint la fin de la vidéo.

      Pour chaque segment de temps que vous ajoutez, vous pouvez lui attribuer une ou plusieurs images miniatures. Vous pouvez ensuite connecter ces miniatures aux pages de produits Aperçu rapide sur lesquelles les clients peuvent effectuer leurs achats ou à des pages Web pour plus d’informations.

    • Appuyez sur le bouton Lire pour démarrer la lecture de la vidéo. Lorsqu’un produit, service ou détail particulier que vous souhaitez mettre en évidence s’affiche, appuyez sur Pause. Appuyez sur Ajouter un segment.

      Continuez la lecture de la vidéo et faites des pauses à chaque endroit le long de la frise chronologique où vous souhaitez ajouter un segment jusqu’à la fin de la vidéo.
  4. (Facultatif) Faites glisser la barre du curseur de durée du segment vers la gauche pour effectuer un zoom avant ou arrière et contrôler le niveau de détail des segments que vous avez ajoutés.

    chlimage_1

    En fonction de la durée de votre vidéo, la durée du segment propose par défaut les valeurs suivantes :

    Si la durée de la vidéo est... Le paramètre Durée de segment propose par défaut...
    3 minutes ou plus 60 secondes
    2 à 3 minutes 30 secondes
    1-2 minutes 20 secondes
    30 à 60 secondes 10 secondes
    30 secondes ou moins 5 secondes

    La frise chronologique vidéo utilise autant d’espace dans l’écran qu’il y a d’espace disponible. De même, lorsque vous redimensionnez la fenêtre du navigateur, les segments que vous avez ajoutés conservent leur largeur appropriée.

    Pour illustration, les trois écrans ci-dessous utilisent la même vidéo. Notez que la largeur de chaque segment varie en fonction du paramètre Durée de segment.

    chlimage_1
    Capture d’écran A

    La capture d’écran A présente l’affichage par défaut de la vidéo de 1 minute et 40 secondes. Le curseur de durée du segment est défini sur la valeur par défaut, 20 secondes.

    chlimage_1
    Capture d’écran B

    Sur la capture d’écran B, le curseur de durée du segment a été ramené de la valeur par défaut, 20 secondes, à 6 secondes. Notez que les différents horodatages de durée du segment correspondent tous à des intervalles de 6 secondes, et un « zoom avant » est effectué sur les deux segments visibles contenant les vignettes de produit, qui semblent plus grands.

    chlimage_1
    Capture d’écran C

    Sur la capture d’écran C, le paramètre Durée de segment a été ramené à 47 secondes. Notez la façon dont les segments contenant les vignettes de produit se sont réduits. Le zoom arrière de cette façon s’avère utile si la vidéo est longue et que vous souhaitez pouvoir afficher un aperçu de plus de segments que la largeur de la page ne pourrait en contenir normalement.

  5. (En option) Effectuez l’une des actions suivantes :

    • Pour ajuster l’heure de début et l’heure de fin d’un segment.

      Sélectionnez un segment, puis faites glisser l’ovale bleu de début ou de fin pour ajuster respectivement l’heure de début ou l’heure de fin. L’image vidéo affichée se déplace à l’heure appropriée dans la vidéo, en fonction de vos ajustements. Le déplacement du segment de la frise chronologique est limité en fonction des segments adjacents dans la frise chronologique. Le temps minimal autorisé pour un segment est d’une seconde.

      Utilisez les raccourcis de navigation ci-dessous pour vérifier et optimiser rapidement les segments de vidéo :

      • Appuyez sur l’ovale bleu de début pour chercher la vidéo directement au début de ce segment.
      • Appuyez sur l’ovale bleu de fin pour chercher la vidéo directement à la fin de ce segment.
      • Appuyez sur le segment entier pour relancer la lecture de la vidéo à partir du début de ce segment.
    Repositionnement d’un segment de frise chronologique
    Repositionnement de la fin d’un segment de frise chronologique
    • Pour supprimer un segment

      Sélectionnez le dernier segment qui se trouve sur la frise chronologique puis, sur la barre d’outils, appuyez sur Supprimer le segment.

      Vous ne pouvez supprimer que le dernier segment. Par exemple, pour supprimer tous les segments de la frise chronologique, vous devez toujours sélectionner le dernier segment.
  6. Sélectionnez un segment de temps auquel vous souhaitez associer une ou plusieurs images miniatures.  

  7. A la droite de la vidéo, appuyez sur l’onglet Contenu.

  8. Sous l’onglet Contenu, appuyez sur Sélectionner les ressources, puis cherchez et sélectionnez toutes les ressources d’image à utiliser avec votre vidéo. Les ressources sélectionnées sont ajoutées au panneau Sélecteur de ressources dans l’onglet Contenu.

  9. Dans le sélecteur de ressources, sous l’onglet Contenu, effectuez l’une des actions suivantes :

    Pour associer une miniature à un segment de frise chronologique sélectionné

    Appuyez sur l’image dans le panneau Sélecteur de ressources dans la partie droite.

    Vous pouvez ajouter à un segment de frise chronologique autant de miniatures que vous le souhaitez. Pour chaque image que vous sélectionnez, une coche s’affiche au-dessus de l’image dans le sélecteur de ressources.

    Pour réorganiser les vignettes dans un segment sélectionné de la frise chronologique.

    Faites glisser une ressource d’image vers son nouvel emplacement dans un segment de la frise chronologique.

    Réorganiser les ressources modifie leur ordre d’affichage dans la zone adjacente au lecteur vidéo lorsque le client visionne la vidéo.

    Pour supprimer une miniature du segment de frise chronologique sélectionné

    Procédez de l’une des manières suivantes :

    • Dans le panneau Sélecteur de ressources, appuyez sur une image comportant une coche pour la désélectionner. La ressource d’image est supprimée du segment de la frise chronologique.
    • Dans le segment de frise chronologique sélectionné, appuyez sur une image puis, dans la barre d’outils, appuyez sur Supprimer le produit.
    Sélecteur de ressources
    Un appui sur une image dans le panneau Sélecteur de ressources permet de l’ajouter dans le segment sélectionné de la frise chronologique.
  10. Sélectionnez une image miniature unique dans l’un des segments de frise chronologique, puis appuyez sur l’onglet Actions.

  11. Procédez de l’une des manières suivantes :

    Pour associer l’image miniature sélectionnée à un aperçu rapide

    Sous Type d’action, appuyez sur Aperçu rapide.

    Si vous êtes un client AEM Sites ou AEM eCommerce :

    • Notez que le champ de texte de valeur de la SKU est prérenseigné avec l’unité de gestion des stocks (SKU) du produit sélectionné, qui est un identifiant unique pour chaque produit ou service distinct que vous proposez. Le champ est renseigné automatiquement lorsque l’image est associée à un produit dans AEM Commerce.
    • Si la SKU prérenseignée est incorrecte, appuyez ou cliquez sur l’icône Sélecteur de produit (loupe) pour afficher la page Sélectionner un produit. Appuyez ou cliquez sur le produit à utiliser, puis appuyez sur la coche dans le coin supérieur droit de la page pour revenir à l’éditeur de vidéos interactives.

     Si vous n’êtes pas un client AEM Sites ou AEM eCommerce :

    • Reportez-vous à la section Identification des variables des zones réactives. Vous devez définir ces variables. 
    • Par défaut, ce champ SKU utilise le nom de fichier de la ressource d’image sans l’extension. Pour vos fichiers, si vous suivez une convention de dénomination standard dépendant de la SKU, il n’est généralement pas nécessaire d’apporter des modifications supplémentaires. 
    • Sinon, modifiez la valeur par défaut et entrez la valeur de SKU appropriée. 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 l’image 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 = Femme est une variable ajoutée.

     

    Pour associer l’image miniature sélectionnée à un lien hypertexte

    Sous Type d’action, appuyez sur Lien hypertexte, puis procédez de l’une des manières suivantes :

    • Si vous êtes un client AEM Sites, appuyez sur l’icône Sélecteur de site (dossier) pour accéder à une page web.
    • Si vous êtes un client Dynamic Media autonome, dans le champ de texte HREF, spécifiez le chemin URL complet vers une page web liée.

    Veillez à spécifier si vous souhaitez ouvrir le lien dans un nouvel onglet du navigateur ou sur l’onglet actif.

    Pour modifier une action déjà attribuée à une image miniature Dans un segment de frise chronologique, appuyez sur une image miniature qui comporte un lien de chaîne à droite de son libellé de texte. Le lien de chaîne indique qu’une action lui est attribuée. Appuyez sur l’onglet Actions pour apporter vos modifications.
    Pour modifier le libellé de texte d’une image miniature

    Par défaut, le libellé du texte utilise le champ Titre de métadonnées de la vignette. En l’absence du champ Titre, le nom de fichier de la vignette est utilisé à la place, mais sans l’extension.

    Pour modifier le libellé de texte d’une vignette, sous l’onglet Actions, directement sous la ressource d’image qui s’affiche, entrez le texte de votre choix. Reportez-vous à l’illustration ci-dessous.

    Notez que le nouveau libellé n’est utilisé que par la visionneuse vidéo proprement dite et le texte des vignettes affiché dans le segment de la frise chronologique. La modification du libellé n’affecte pas le champ Titre des métadonnées de la vignette ni son nom de fichier.

    Pour annuler une modification que vous avez effectuée Près de l’angle droit supérieur de la page, appuyez sur Annuler ou Rétablir.
    Libellé de texte
    Un nouveau libellé de texte est ajouté à la miniature.
  12. Utilisez l’une des méthodes suivantes :

    • Répétez les étapes 6 à 11 pour ajouter d’autres vignettes aux segments de la frise chronologique dans votre vidéo.
    • Appuyer sur Enregistrer, puis sur OK pour revenir à la page Paramètres prédéfinis de visionneuse de la vidéo. Dans la page, sélectionnez un paramètre prédéfini de visionneuse à gauche de la vidéo, puis visionnez la vidéo pour découvrir les résultats.

      Dans le coin supérieur droit de la page Créer une vidéo interactive, le nom du paramètre prédéfini de visionneuse actuellement sélectionné utilisé par la vidéo s’affiche. Appuyez sur le nom pour sélectionner un autre paramètre prédéfini de visionneuse. Par exemple, le paramètre prédéfini de visionneuse Shoppable_video_light permet de visionner la vidéo avec une zone d’affichage blanche en regard de la vidéo. C’est dans cette zone d’affichage que s’affichent les vignettes cliquables lors du visionnage. Le paramètre prédéfini de visionneuse Shoppable_video_dark permet de visionner la vidéo avec une zone d’affichage noire en regard de la vidéo.
      Si vous avez créé votre propre paramètre prédéfini de visionneuse de vidéos interactives, il s’affiche également dans la liste de paramètres prédéfinis que vous pouvez sélectionner.

    Remarque :

    Lorsque vous enregistrez votre vidéo interactive, un fichier associé .vtt est automatiquement enregistré avec elle. Le fichier .vtt est enregistré dans le dossier _VTT situé à la racine de Ressources. Le fichier et le dossier sont nécessaires pour lire correctement votre vidéo interactive sur votre site Web. C’est pourquoi le dossier _VTT ou son contenu ne doit pas être déplacé, modifier ni supprimé.

  13. Publiez la vidéo interactive. La publication crée le code incorporé ou l’URL que vous copiez et collez éventuellement pour enrichir les expériences de votre site Web.

    Si vous avez ajouté l’interactivité avec des aperçus rapides, n’utilisez que le code incorporé. Toutefois, si vous avez ajouté l’interactivité grâce à des pages Web connectées par liens hypertexte, vous pouvez également utiliser l’URL publiée.

    Voir Publication de ressources.

    Remarque :

    Pour publier une vidéo Shoppable avec des aperçus rapides, veillez également à publier séparément chaque ressource d’image liée à la vidéo dans votre espace commercial.

    Une fois les segments de frise chronologique ajoutés et la vidéo interactive publiée, vous êtes prêt à l’ajouter à la page d’entrée de votre site Web existant. Voir Intégration d’une vidéo interactive à votre site Web.

Intégration d’une vidéo interactive à votre site web

Une fois que vous avez téléchargé une vidéo, que vous lui avez ajouté des segments de frise chronologique et que vous avez publié la vidéo interactive, vous êtes prêt à l’ajouter à votre site Web existant.

Si vous êtes un client AEM Sites, vous pouvez ajouter la vidéo 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 la vidéo interactive à votre site web, comme indiqué dans cette section.

  1. Copiez le code incorporé ou l’URL de la vidéo interactive publiée.
    Voir Incorporation de la vidéo ou de la visionneuse d’images sur une page Web.
    Si vous avez ajouté l’interactivité avec des aperçus rapides, n’utilisez que le code incorporé. Toutefois, si vous avez ajouté l’interactivité grâce à des pages Web connectées par liens hypertexte, vous pouvez également utiliser l’URL publiée.
  2. Dans le code de la page Web cible, identifiez l’emplacement de la vidéo statique.
  3. Supprimez la vidéo statique et remplacez le code par le code incorporé ou l’URL que vous avez copiée depuis Ressources AEM, en l’état.
    Le code incorporé copié est conçu pour un environnement réactif et devrait donc s’adapter automatiquement à la zone occupée précédemment par la vidéo statique.

Remarque :

A ce point, si vous avez ajouté l’interactivité avec seulement des pages Web connectées par liens hypertexte, votre travail est terminé.

Toutefois, si vous avez ajouté une interactivité pour déclencher un aperçu rapide, les miniatures adjacentes à la vidéo interactive ne sont destinées qu’à l’affichage. Elles ne sont pas encore intégrées à vos aperçus rapides existants. Si tel est le cas, vous devez intégrer la vidéo interactive aux aperçus rapides existants sur votre site Web.

Exemple

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

https://marketing.adobe.com/resources/help/en_US/aod/shop-video/landing-0.html

Notez qu’il s’agit du code intégré d’une vidéo standard :

<style type="text/css">
	#s7video_div.s7videoviewer{
		 width:100%; 
		 height:auto;
	}
</style>
<script type="text/javascript" src="http://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/VideoViewer.js"></script>
<div id="s7video_div"></div>
<script type="text/javascript">
	var s7videoviewer = new s7viewers.VideoViewer({
		"containerId" : "s7video_div",
		"params" : { 
			"serverurl" : "http://aodmarketingna.assetsadobe.com/is/image",
			"contenturl" : "http://aodmarketingna.assetsadobe.com/", 
			"config" : "/etc/dam/presets/viewer/Video",
			"config2": "/etc/dam/tenants/aodmarketingna/presets/analytics",
			"videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
			"posterimage": "/content/dam/mac/aodmarketingna/shoppable-video/soppable-video-john-lewis-2014.mp4",
			"asset" : "/content/dam/mac/aodmarketingna/shoppable-video/soppable-video-john-lewis-2014.mp4" }
	}).init();
</script>

L’intégration est aussi simple que la suppression du code intégré de la vidéo et son remplacement par le code intégré de la vidéo interactive à partir d’AOD. Vous pouvez afficher le résultat à l’adresse URL suivante : Même si la page contient une vidéo interactive, celle-ci n’est pas encore intégrée aux aperçus rapides existants :

https://marketing.adobe.com/resources/help/en_US/aod/shop-video/landing-1.html

Intégration d’une vidéo interactive avec 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 consiste à intégrer votre vidéo interactive avec une mise en œuvre existante de l’aperçu rapide utilisée sur votre site web. Pour ce qui est de l’intégration, il n’existe pas de solution qui fonctionne dans tous les cas. La mise en œuvre de chaque aperçu rapide est unique. De ce fait, une approche spécifique, impliquant probablement l’aide d’un informaticien compétent en systèmes frontaux, est nécessaire.

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.

Alors que la vidéo interactive remplace l’étape 1, et partiellement l’étape 2, lorsqu’un utilisateur clique sur une vignette dans la vidéo interactive, cette interaction de l’utilisateur est gérée par la visionneuse. La visionneuse renvoie un événement dans la page web qui contient toutes les données de vignette ajoutées précédemment dans AOD.

Dans ce type de descripteur d’événement, le code frontal permet d’effectuer les opérations suivantes :

  • Il écoute un événement émis par la vidéo interactive.
  • Il construit une URL d’aperçu rapide en fonction des données de vignette.
  • Déclenche le processus de chargement de l’aperçu rapide depuis le serveur principal et en effectue le rendu à l’écran.

De plus, la visionneuse de vidéos interactives prend en charge le mode de fonctionnement Plein écran. L’utilisateur final déclenche les aperçus rapides en cliquant sur une vignette sans quitter le mode Plein écran. Pour bénéficier de cette fonctionnalité, vous modifiez le code frontal afin que la boîte de dialogue modale d’aperçu rapide soit définie dans le conteneur de la visionneuse. N’ajoutez pas l’élément BODY du document ni d’autres éléments de page web qui ne sont pas disponibles lorsque la visionneuse est en mode Plein écran. Le code qui exécute cette tâche doit écouter un autre rappel de visionneuse, envoyé après le chargement de la visionneuse dans la page.

Le code intégré renvoyé par AOD comporte déjà un descripteur d’événement prêt à l’emploi. Il est commenté, comme dans le fragment de code mis en évidence ci-dessous :

 

<style type="text/css">
	#s7interactivevideo_div.s7interactivevideoviewer{
		 width:100%; 
		 height:auto;
	}
</style>
<script type="text/javascript" src="http://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
	var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
		"containerId" : "s7interactivevideo_div",
		"params" : { 
			"serverurl" : "http://aodmarketingna.assetsadobe.com/is/image",
			"contenturl" : "http://aodmarketingna.assetsadobe.com/", 
			"config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
			"videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
			"interactivedata": "is/content/content/dam/mac/aodmarketingna/_VTT/shoppable-video/soppable-video-john-lewis-2014.mp4.svideo.vtt",
			"asset" : "/content/dam/mac/aodmarketingna/shoppable-video/soppable-video-john-lewis-2014.mp4" }
	})
	/* // Example of interactive video event for quick view.
		 s7interactivevideoviewer.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
			 }, 
"initComplete":function() { 
				//--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
				var popup = document.getElementById('quickview_div'); // get custom quick view container
				popup.parentNode.removeChild(popup); // remove it from current DOM
				var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
				var inner_container = document.getElementById(sdkContainerId); 
				inner_container.appendChild(popup); //Attach custom quick view container to viewer
			 } 
		 });
	*/
	s7interactivevideoviewer.init();
</script>

Il suffit donc de supprimer les commentaires du fragment de code mis en évidence et de remplacer le corps des descripteurs fictifs spécifiques à cette page web.

Le code intégré standard comporte deux descripteurs de rappel par défaut : quickViewActivate et initComplete. Le descripteur quickViewActivate se déclenche lorsqu’un utilisateur clique sur une vignette dans la visionneuse. Utilisez-le pour intégrer la visionneuse à la logique d’activation de l’aperçu rapide. Le descripteur initComplete ne se déclenche qu’une seule fois lorsque la visionneuse se charge dans la page. Ce descripteur est utilisé pour modifier l’emplacement de la boîte de dialogue Aperçu rapide dans le modèle objet de document (DOM) de la page web.

La procédure de construction de l’URL de l’aperçu rapide est la procédure inverse de l’identification des variables de vignette, dont nous avons parlé plus tôt dans cette rubrique. En utilisant les exemples d’URL d’aperçu rapide identifiés, vous pouvez découvrir comment l’URL d’aperçu rapide est construite dans chaque cas :

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

s7interactivevideoviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var quickViewUrl = "http://server/json?productId=" + inData.sku + "&source=100";
     },
 });
SKU unique, trouvé dans le chemin d’accès à l’URL s7interactivevideoviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var quickViewUrl = "http://server/product/" + inData.sku;
     },
 });

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

s7interactivevideoviewer.setHandlers({
    "quickViewActivate": function(inData) {
        var quickViewUrl = "http://server/quickView/product/?category=" + inData.categoryId + "&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 découvrir comment ces étapes sont appliquées au site web de démonstration pour l’intégration complète d’une vidéo interactive 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

Vous pouvez reconstruire facilement cette URL à l’intérieur du descripteur quickViewActivate à l’aide des champs categoryId et sku dans l’objet inData transmis au descripteur par le code de la visionneuse, comme dans l’exemple suivant :

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. La dernière étape nécessaire à l’intégration de la vidéo interactive consiste donc à ajouter la ligne de code ci-dessous au descripteur quickViewActivate :

loadQuickView(quickViewUrl);

Enfin, veillez à ce que la boîte de dialogue Aperçu rapide soit associée à l’élément de conteneur de la visionneuse. Le code intégré par défaut indique les exemples d’étapes à suivre pour bénéficier de cette fonctionnalité. Pour obtenir une référence à l’élément de conteneur de la visionneuse, vous pouvez utiliser les lignes de code ci-dessous :

var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);

inner_container est une référence à un élément DIV géré par la visionneuse. La boîte de dialogue doit être un enfant de l’élément DIV.

La procédure de recherche de l’élément de boîte de dialogue modale et d’association au conteneur ci-dessus dépend de chaque cas. Là encore, vous pouvez obtenir de l’aide auprès du développeur frontal, qui connaît votre mise en œuvre de l’aperçu rapide nécessaire.

Dans le cas de l’exemple de site web, la boîte de dialogue modale de l’aperçu rapide est mise en œuvre sous forme d’élément DIV, l’ID quickview-modal étant associé directement à l’élément BODY du document. Par conséquent, le code utilisé pour déplacer cette boîte de dialogue dans le conteneur de la visionneuse est aussi simple que ce qui suit :

var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
inner_container.appendChild(document.getElementById("quickview-modal"));
 Here is the complete source code 
<style type="text/css">
	#s7interactivevideo_div.s7interactivevideoviewer{
		 width:100%; 
		 height:auto;
	}
</style>
<script type="text/javascript" src="http://aodmarketingna.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>
<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
	var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
		"containerId" : "s7interactivevideo_div",
		"params" : { 
			"serverurl" : "http://aodmarketingna.assetsadobe.com/is/image",
			"contenturl" : "http://aodmarketingna.assetsadobe.com/", 
			"config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
			"videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/aodmarketingna",
			"interactivedata": "is/content/content/dam/mac/aodmarketingna/_VTT/shoppable-video/soppable-video-john-lewis-2014.mp4.svideo.vtt",
			"asset" : "/content/dam/mac/aodmarketingna/shoppable-video/soppable-video-john-lewis-2014.mp4" }
	})
	// Example of interactive video event for quick view.
		 s7interactivevideoviewer.setHandlers({ 
			"quickViewActivate": function(inData) {
 				var sku=inData.sku; //SKU for product ID
 				var categoryId=inData.categoryId; //categoryId
				var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
				loadQuickView(quickViewUrl);
			 },
			"initComplete":function() { 
				//--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
				var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
				var inner_container = document.getElementById(sdkContainerId);
				inner_container.appendChild(document.getElementById("quickview-modal"));
			 } 
		 });
	s7interactivevideoviewer.init();
</script>

Le dernier site web de démonstration avec la vidéo interactive totalement intégrée se présente comme suit :

https://marketing.adobe.com/resources/help/en_US/aod/shop-video/landing-3.html

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