Documentation« Acrobat Services »

Contrôlez l’expérience en ligne de votre PDF et collectez des analyses

Last update: Fri Jul 19 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Intermédiaire
  • Développeur

Votre organisation publie-t-elle des mots de PDF sur votre site Web ? Découvrez comment utiliser l’API Adobe PDF Embed pour contrôler l’apparence, activer la collaboration et collecter des analyses sur la façon dont l’utilisateur interagit avec les PDF, y compris le temps passé sur une page et les recherches. Pour commencer ce tutoriel pratique en 4 parties, sélectionnez Prise en main de l’API PDF Embed.

Partie 1 : Prise en main de l’API PDF Embed

Première partie : prise en main de l’API PDF Embed

Partie 2 : Ajout d’une API PDF Embed à une page web

Partie 2 : ajout d’une API PDF Embed à une page web

Partie 3 : Accès aux API Analytics

Partie 3 : accès aux API Analytics

Partie 4 : Ajout d’interactivité en fonction des événements

Partie 4 : ajout d’interactivité en fonction des événements

Partie 1 : Prise en main de l’API PDF Embed part1

Dans la partie 1, découvrez comment commencer à utiliser tout ce dont vous avez besoin pour les parties 1 à 3. Vous allez commencer par obtenir des identifiants d’API.

Ce dont vous avez besoin

  • Ressources de tutoriel télécharger
  • Adobe ID en obtenir un ici
  • Serveur Web (Nœud JS, PHP, etc.)
  • Connaissances pratiques de HTML / JavaScript / CSS

Ce que nous utilisons

  • Un serveur web de base (Nœud)
  • Code Visual Studio
  • GitHub

Obtention des informations d’identification

  1. Accédez au site web Adobe.io.

  2. Cliquez sur En savoir plus sous Créer des expériences de document attrayantes.

    Capture décran du bouton En savoir plus

    Cela vous amène à la page d'accueil Adobe Acrobat Services.

  3. Cliquez sur Commencer dans la barre de navigation.

    Vous verrez une option dans Commencer avec Acrobat Services API pour Créer de nouvelles informations d’identification ou Gérer les informations d’identification existantes.

  4. Cliquez sur le bouton Commencer sous Créer de nouvelles informations d'identification.

    Capture décran du bouton Commencer

  5. Sélectionnez le bouton radio API PDF Embed et ajoutez un nom d'identification de votre choix et un domaine d'application dans la fenêtre suivante.

    note note
    NOTE
    Ces informations d’identification ne peuvent être utilisées que sur le domaine d’application répertorié ici. Vous pouvez utiliser le domaine de votre choix.

    Capture décran des informations didentification

  6. Cliquez sur Créer des informations d'identification.

    La dernière page de l’Assistant vous fournit les informations d’identification du client. Laissez cette fenêtre ouverte afin de pouvoir y revenir et copier l’ID client (clé API) pour une utilisation ultérieure.

  7. Cliquez sur Afficher la documentation pour accéder à la documentation contenant des informations détaillées sur l'utilisation de cette API.

    Capture décran du bouton Créer des informations didentification

Partie 2 : Ajout d’une API PDF Embed à une page web part2

Dans la deuxième partie, vous apprendrez à intégrer facilement l’API PDF Embed dans une page Web. Pour ce faire, vous utiliserez la démonstration en ligne de l’API Adobe PDF Embed pour créer votre code.

Obtenir le code d’exercice

Nous avons créé du code que vous pouvez utiliser. Vous pouvez utiliser votre propre code, mais les démonstrations s’inscriront dans le contexte des ressources du tutoriel. Téléchargez l'exemple de code ici.

  1. Accédez au Adobe Acrobat Services site web.

    Capture décran du site web Adobe Acrobat Services

  2. Cliquez sur API dans la barre de navigation, puis accédez à la page API PDF Embed dans le lien déroulant.

    Capture d’écran du menu déroulant de l’API PDF Embed

  3. Cliquez sur Essayer la démonstration.

    Une nouvelle fenêtre apparaît avec le sandbox des développeurs pour l’API PDF Embed.

    Capture décran de la démo

    Vous pouvez voir ici les options des différents modes d’affichage.

  4. Cliquez sur les différents modes d’affichage pour Fenêtre entière, Conteneur dimensionné, En ligne et Lightbox.

    Capture décran des modes daffichage

  5. Cliquez sur le mode d'affichage Fenêtre entière, puis sur le bouton Personnaliser pour activer et désactiver les options.

    Capture décran du bouton Personnaliser

  6. Désactivez l'option de PDF Télécharger.

  7. Cliquez sur le bouton Générer du code pour afficher l'aperçu du code.

  8. Copiez l'ID client à partir de la fenêtre Informations d'identification du client de la partie 1.

    Capture décran de lID client

  9. Ouvrez le fichier Web -> resources -> js -> dc-config.js dans votre éditeur de code.

    Vous verrez que la variable clientID est là.

  10. Collez vos informations d’identification client entre les guillemets doubles pour définir l’ID client sur vos informations d’identification.

  11. Revenez à l’aperçu du code sandbox développeur.

  12. Copiez la deuxième ligne contenant le script d’Adobe :

    code language-none 
    <script src=https://documentccloud.adobe.com/view-sdk/main.js></script>

    Capture décran du script

  13. Accédez à votre éditeur de code et ouvrez le fichier Web -> exercice -> index.html.

  14. Collez le code de script dans le <head> du fichier, ligne 18, sous le commentaire suivant : TODO : EXERCICE 1 : INSERT EMBED API SCRIPT TAG.

    Capture décran de lemplacement où coller le code de script

  15. Revenez à l’aperçu du code sandbox développeur et copiez la première ligne de code contenant :

    code language-none 
    <div id="adobe-dc-view"></div>

    Capture décran de lemplacement où copier le code

  16. Accédez à votre éditeur de code et ouvrez le fichier Web -> exercice -> index.html.

  17. Collez le code <div> dans le <body> du fichier à la ligne 67 sous le commentaire TODO : EXERCICE 1 : INSERT PDF EMBED API CODE.

    Capture décran de lemplacement où coller le code

  18. Revenez à l’aperçu du code sandbox développeur et copiez les lignes de code pour <script> ci-dessous :

    code language-none 
    <script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready",             function(){
        var adobeDCView = new AdobeDC.View({clientId:                     "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
        adobeDCView.previewFile({
            content:{location: {url: "https://documentcloud.                adobe.com/view-sdk-demo/PDFs/Bodea Brochure.                    pdf"}},
            metaData:{fileName: "Bodea Brochure.pdf"}
        }, {showDownloadPDF: false});
    });
</script>

  19. Accédez à votre éditeur de code et ouvrez le fichier Web -> exercice -> index.html.

  20. Collez le code <script> dans <body> du fichier à la ligne 68 sous la balise <div>.

  21. Modifiez la ligne 70 du même fichier index.html pour inclure la variable clientID créée précédemment.

    Capture d’écran de la ligne 70

  22. Modifiez la ligne 72 du même fichier index.html pour mettre à jour l'emplacement du fichier du PDF afin d'utiliser un fichier local.

    Il en existe un dans les fichiers du tutoriel de /resources/pdfs/whitepaper.pdf.

  23. Enregistrez vos fichiers modifiés et prévisualisez votre site Web en accédant à <your domain>/Summit21/web/exercice/.

    Le rendu du livre blanc technique doit s’afficher en mode Fenêtre complète dans votre navigateur.

Partie 3 : Accès aux API Analytics part3

Maintenant que vous avez réussi à créer une page web avec l’API PDF Embed qui restitue un PDF, dans la troisième partie, vous pouvez maintenant découvrir comment utiliser les événements JavaScript pour mesurer les analyses et comprendre comment les utilisateurs utilisent les PDF.

Recherche de documentation

De nombreux événements JavaScript différents sont disponibles dans le cadre de l’API PDF Embed. Vous pouvez y accéder depuis la documentation Adobe Acrobat Services.

  1. Accédez au site documentation.

  2. Passez en revue les différents types d’événements disponibles dans le cadre de l’API. Ils sont utiles pour référence et seront également utiles pour vos projets futurs.

    Capture décran du guide de référence

  3. Copiez l’exemple de code répertorié sur le site web.

    Utilisez-le comme base de votre code et modifiez-le.

    Capture décran de lemplacement de copie de lexemple de code

    code language-none 
    const eventOptions = {
  //Pass the PDF analytics events to receive.
   //If no event is passed in listenOn, then all PDF         analytics events will be received.
listenOn: [ AdobeDC.View.Enum.PDFAnalyticsEvents.    PAGE_VIEW, AdobeDC.View.Enum.PDFAnalyticsEvents.DOCUMENT_DOWNLOAD],
  enablePDFAnalytics: true
}


adobeDCView.registerCallback(
  AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
  function(event) {
    console.log("Type " + event.type);
    console.log("Data " + event.data);
  }, eventOptions
);

  4. Recherchez la section de code que vous avez ajoutée précédemment et qui ressemble au code ci-dessous, puis ajoutez le code ci-dessus après ce code dans index.html :

    Capture décran de lemplacement où coller le code

  5. Chargez la page dans votre navigateur web et ouvrez la console pour afficher les sorties des différents événements de la console lorsque vous interagissez avec la visionneuse du PDF.

    Capture décran du chargement de la page

    Capture décran du code de chargement de la page

Ajouter un commutateur pour capturer des événements

Maintenant que les événements sont sortis sur console.log, modifions le comportement en fonction de quels événements. Pour ce faire, vous allez utiliser un exemple de commutateur.

  1. Accédez à snippets/eventsSwitch.js et copiez le contenu du fichier dans le code du tutoriel.

    Capture décran de lemplacement où copier le code

  2. Collez le code dans la fonction d'écouteur d'événement.

    Capture décran de lemplacement où coller le code

  3. Vérifiez que la console sort correctement lorsque la page est chargée et que vous interagissez avec la visionneuse du PDF.

Adobe Analytics

Si vous souhaitez ajouter la prise en charge d’Adobe Analytics à votre visionneuse, vous pouvez suivre les instructions fournies sur le site web.

IMPORTANT
Adobe Analytics doit déjà être chargé sur votre page Web dans l’en-tête.

Accédez à la documentation Adobe Analytics et vérifiez si Adobe Analytics est déjà activé sur votre page Web. Suivez les instructions pour configurer une suite de rapports.

Google Analytics

Capture d’écran expliquant comment procéder à l’intégration avec Google Analytics

L’API Adobe PDF Embed fournit une intégration prête à l’emploi avec Adobe Analytics. Cependant, comme tous les événements sont disponibles en tant qu’événements JavaScript, il est possible de les intégrer à Google Analytics en capturant les événements de PDF et en utilisant la fonction ga() pour ajouter l’événement à Adobe Analytics.

  1. Accédez à snippets/eventsSwitchGA.js pour voir comment procéder à l'intégration avec Google Analytics.

  2. Passez en revue et utilisez ce code comme exemple si votre page web est suivie à l’aide d’Adobe Analytics et qu’elle est déjà incorporée à la page web.

    Capture décran du code Adobe Analytics

Partie 4 : Ajout d’interactivité en fonction des événements part4

Dans la quatrième partie, vous apprendrez à superposer sur le visualiseur de votre PDF un paywall qui s'affiche une fois que vous avez dépassé la deuxième page.

Exemple de paywall

Accédez à cet exemple de PDF derrière un paywall. Dans cet exemple, vous apprendrez à ajouter de l’interactivité à une expérience de visionnage dans un PDF.

Ajouter un code paywall

  1. Accédez à snippets/paywallCode.html et copiez le contenu.

  2. Recherchez <!-- TODO: EXERCISE 3: INSERT PAYWALL CODE --> dans exercise/index.html.

    Capture décran de lemplacement où copier le code

  3. Collez le code copié après le commentaire.

  4. Accédez à snippets/paywallCode.js et copiez le contenu.

    Capture décran de lemplacement où coller le code

  5. Collez le code à cet emplacement.

Essayer la démonstration avec Paywall

Vous pouvez maintenant voir la démonstration.

  1. Rechargez index.html sur votre site Web.

  2. Faites défiler la page vers le bas jusqu’à > 2.

  3. Affichez la boîte de dialogue qui s’affiche pour demander à l’utilisateur de répondre après la deuxième page.

    Capture décran de la démonstration

Autres ressources

Des ressources supplémentaires sont disponibles ici.

recommendation-more-help
61c3404d-2baf-407c-beb9-87b95f86ccab