Documentation»Acrobat Services »

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

Last update: Fri Aug 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Intermediate
  • Developer

Votre organisation affiche-t-elle des 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 les utilisateurs interagissent 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

Partie 1 : 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 première partie, découvrez comment commencer à utiliser tout ce dont vous avez besoin pour les parties 1 à 3. Vous commencerez par obtenir les identifiants d’API.

Ce dont vous avez besoin

Ce que nous utilisons

  • Serveur Web de base (noeud)
  • Code Visual Studio
  • GitHub

Obtention des informations

  1. Accédez à l’onglet Site Web Adobe.io.

  2. Cliquez En savoir plus sous Créer des expériences documentaires attrayantes.

    Capture d’écran du bouton En savoir plus

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

  3. Cliquez Prise en main dans la barre de navigation.

    Vous verrez une option dans le Prise en main Acrobat Services API à Créer de nouvelles identifiants ou Gérer les identifiants existants.

  4. Cliquez Prise en main sous le bouton Créer de nouvelles identifiants.

    Capture décran du bouton Commencer

  5. Sélectionnez le 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 n’importe quel domaine de votre choix.

    Capture d’écran des identifiants

  6. Cliquez Créer des identifiants.

    La dernière page de l'Assistant vous fournit les informations d'identification de votre 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 Voir la documentation pour accéder à la documentation avec des informations détaillées sur l’utilisation de cette API.

    Capture d’écran du bouton Créer des identifiants

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 allez utiliser la démonstration en ligne de l’API Adobe PDF Embed pour créer votre code.

Obtenir le code de l'exercice

Nous avons créé du code que vous pouvez utiliser. Bien que vous puissiez utiliser votre propre code, les démonstrations s’effectueront dans le contexte des ressources du tutoriel. Télécharger un exemple de code ici.

  1. Accéder à Adobe Acrobat Services site.

    Capture décran Adobe Acrobat Services site

  2. Cliquez API dans la barre de navigation, puis accédez à la API PDF Embed dans la liste déroulante.

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

  3. Cliquez Essayer la démonstration.

    Une nouvelle fenêtre s’ouvre avec le sandbox du développeur pour l’API PDF Embed.

    Capture décran de Tester la démonstration

    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 redimensionné, En ligne et Lightbox.

    Capture d’écran des modes de visualisation

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

    Capture décran du bouton Personnaliser

  6. Désactiver Télécharger Option de PDF.

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

  8. Copier ID client dans la fenêtre Informations d'identification du client de la partie 1.

    Capture d’écran de l’ID client

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

    Vous verrez que la variable clientID est présente.

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

  11. Revenez à l’aperçu du code sandbox du 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 fichier.

  14. Collez le code de script dans le <head> du fichier à la ligne 18 sous le commentaire qui dit : TODO: EXERCICE 1 : INSÉRER UNE BALISE DE SCRIPT API EMBED.

    Capture d’écran de l’emplacement où coller le code de script

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

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

    Capture décran indiquant où copier le code

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

  17. Collez le <div> dans le fichier <body> du dossier à la ligne 67 sous le commentaire qui indique TODO: EXERCICE 1 : INSÉRER LE CODE API INCORPORÉ AU PDF.

    Capture d’écran de l’emplacement du collage du code

  18. Revenez à l’aperçu du code sandbox du développeur et copiez les lignes de code pour le fichier <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 à nouveau.

  20. Collez le <script> dans le fichier <body> du dossier à la ligne 68 sous la rubrique <div> Balise.

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

    Capture décran de la ligne 70

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

    Il y en a un disponible dans les fichiers tutoriels du /resources/pdfs/whitepaper.pdf.

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

    Le rendu de l’article technique devrait s’afficher en mode Fenêtre pleine dans votre navigateur.

Partie 3 : Accès aux API Analytics part3

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

Recherche de documentation

Il existe de nombreux événements JavaScript dans le cadre de l’API d’intégration de PDF. Vous pouvez y accéder à partir de Adobe Acrobat Services la documentation.

  1. Accédez à l’onglet documentation site.

  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 futurs projets.

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

  3. Copiez l'exemple de code figurant sur le site web.

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

    Capture décran de lemplacement de copie

    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 à celle ci-dessous, puis ajoutez le code ci-dessus après ce code dans index.html:

    Capture d’écran de l’emplacement du collage du code

  5. Chargez la page dans votre navigateur web et ouvrez la console pour afficher les sorties de la console des différents événements lorsque vous interagissez avec l’afficheur 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 vous avez généré les événements dans le journal console.log, changeons le comportement en fonction des é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 indiquant où copier le code

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

    Capture d’écran de l’emplacement du collage du code

  3. Vérifiez que la sortie de la console est correcte lorsque la page est chargée et que vous interagissez avec l’afficheur du PDF.

Adobe Analytics

Si vous souhaitez ajouter la prise en charge d’Adobe Analytics à votre lecteur, vous pouvez suivre les instructions documentées sur le site Web.

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

Accédez à l’onglet Documentation Adobe Analytics et vérifiez si Adobe Analytics est déjà activé sur votre page web. Suivez les instructions pour configurer reportSuite.

Google Analytics

Capture d’écran de l’intégration avec les Google Analytics

L’API Adobe PDF Embed fournit une intégration prête à l’emploi avec Adobe Analytics. Cependant, étant donné que tous les événements sont disponibles en tant qu’événements JavaScript, il est possible de les intégrer à des Google Analytics en capturant des é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 vous pouvez intégrer des Google Analytics.

  2. Examinez 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 à placer sur le dessus de la visionneuse de votre PDF une paywall qui s’affiche après le défilement de la deuxième page.

Exemple de Paywall

Accédez à cette exemple de PDF derrière une paywall. Dans cet exemple, vous allez apprendre à ajouter de l'interactivité à une expérience de visionnage de PDF.

Ajouter un code paywall

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

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

    Capture décran indiquant où copier le code

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

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

    Capture d’écran de l’emplacement du collage du code

  5. Collez le code dans cet emplacement.

Tester la démonstration avec Paywall

Vous pouvez maintenant visionner la démonstration.

  1. Recharger index.html sur votre site web.

  2. Faites défiler la liste jusqu’à une page > 2.

  3. Afficher la boîte de dialogue qui s’affiche pour demander à l’utilisateur d’accéder à 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