PDF-Onlineerlebnis kontrollieren und Analysen einholen

Hat Ihr Unternehmen PDF auf Ihrer Website veröffentlicht? Hier erfahren Sie, wie Sie die Adobe PDF Embed-API verwenden, um das Erscheinungsbild zu steuern, die Zusammenarbeit zu ermöglichen und Analysen darüber zu erfassen, wie Benutzer mit PDF interagieren, einschließlich Zeitaufwand für eine Seite und Suchvorgänge. Um dieses 4-teilige praktische Tutorial zu beginnen, wählen Sie Erste Schritte mit der PDF Embed-API.

Teil 1: Erste Schritte mit der PDF Embed-API part1

Im ersten Teil lernst du, wie du mit allem anfängst, was du für die ersten Teile brauchst. Sie beginnen mit dem Abrufen von API-Zugangsberechtigungen.

Was Sie benötigen

  • Tutorial-Ressourcen Download
  • Adobe ID hier abrufen
  • Webserver (Node JS, PHP usw.)
  • Grundkenntnisse in HTML / JavaScript / CSS

Was wir verwenden

  • Ein einfacher Webserver (Knoten)
  • Visual Studio-Code
  • GitHub

Abrufen von Anmeldedaten

  1. Rufen Sie die Website Adobe.io auf.

  2. Klicken Sie auf Weitere Informationen unter Erstellen ansprechender Dokumenterlebnisse.

    Screenshot der Schaltfläche Weitere Informationen

    Dadurch gelangen Sie zur Startseite von Adobe Acrobat Services.

  3. Klicken Sie in der Navigationsleiste auf Erste Schritte.

    Sie sehen eine Option in Erste Schritte mit Acrobat Services APIs bis Neue Anmeldeinformationen erstellen oder Vorhandene Anmeldeinformationen verwalten.

  4. Klicken Sie auf die Schaltfläche Erste Schritte unter Neue Anmeldeinformationen erstellen.

    Screenshot der Schaltfläche Erste Schritte

  5. Wählen Sie das Optionsfeld PDF Embed API, und fügen Sie im nächsten Fenster einen Anmeldeinformationsnamen Ihrer Wahl und eine Anwendungsdomäne hinzu.

    note note
    NOTE
    Diese Anmeldeinformationen können nur in der Anwendungsdomäne verwendet werden, die hier aufgeführt ist. Sie können jede beliebige Domäne verwenden.

    Screenshot der Anmeldeinformationen

  6. Klicken Sie auf Anmeldeinformationen erstellen.

    Auf der letzten Seite des Assistenten finden Sie die Details zu den Clientanmeldeinformationen. Lassen Sie dieses Fenster geöffnet, damit Sie zu ihm zurückkehren und die Client-ID (API-Schlüssel) zur späteren Verwendung kopieren können.

  7. Klicken Sie auf Dokumentation anzeigen, um die Dokumentation mit detaillierten Informationen zur Verwendung dieser API aufzurufen.

    Screenshot der Schaltfläche Anmeldeinformationen erstellen

Teil 2: PDF Embed-API zu einer Webseite hinzufügen part2

Im zweiten Teil lernen Sie, wie Sie die PDF Embed-API ganz einfach in eine Webseite einbetten können. Dazu verwenden Sie die Online-Demo von Adobe PDF Embed API, um unseren Code zu erstellen.

Abrufen des Übungscodes

Wir haben Code erstellt, den Sie verwenden können. Sie können zwar Ihren eigenen Code verwenden, aber die Demonstrationen befinden sich im Kontext der Tutorial-Ressourcen. Laden Sie hier den Beispielcode 🔗 herunter.

  1. Gehen Sie zu Adobe Acrobat Services Website.

    Screenshot der Adobe Acrobat Services-Website

  2. Klicken Sie in der Navigationsleiste auf APIs, und navigieren Sie dann im Dropdown-Link zur Seite PDF Embed API.

    Screenshot der PDF Embed-API-Dropdownliste

  3. Klicken Sie auf Demo testen.

    Ein neues Fenster mit der Entwickler-Sandbox für PDF Embed-API wird angezeigt.

    Screenshot von Demo testen

    Hier sehen Sie die Optionen für die verschiedenen Anzeigemodi.

  4. Klicken Sie auf die verschiedenen Anzeigemodi für "Volles Fenster", "Größter Container", "Inline" und "Leuchtpult".

    Screenshot der Anzeigemodi

  5. Klicken Sie auf Volles Fenster, Anzeigemodus, und klicken Sie dann auf die Schaltfläche Anpassen, um die Optionen ein- und auszuschalten.

    Screenshot der Schaltfläche Anpassen

  6. Deaktivieren Sie die Option PDF herunterladen.

  7. Klicken Sie auf die Schaltfläche Code generieren, um die Codevorschau anzuzeigen.

  8. Kopieren Sie Client-ID aus dem Fenster Client-Anmeldeinformationen aus Teil 1.

    Screenshot der Client-ID

  9. Öffnen Sie die Datei Web -> Ressourcen -> js -> dc-config.js in Ihrem Code-Editor.

    Die Variable "clientID" ist bereits vorhanden.

  10. Fügen Sie Ihre Client-Anmeldedaten zwischen den doppelten Anführungszeichen ein, um die clientID auf Ihre Anmeldedaten festzulegen.

  11. Kehren Sie zur Entwickler-Sandbox-Codevorschau zurück.

  12. Kopieren Sie die zweite Zeile, die das Adobe-Skript enthält:

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

    Screenshot des Skripts

  13. Wechseln Sie zu Ihrem Code-Editor und öffnen Sie die Datei Web -> Übung -> index.html.

  14. Fügen Sie den Skriptcode in Zeile 18 in <head> der Datei unter dem Kommentar mit folgendem Text ein: TODO: EXERCISE 1: INSERT EMBED API SCRIPT TAG.

    Screenshot, wo Skriptcode eingefügt werden soll

  15. Kehren Sie zur Entwickler-Sandbox-Codevorschau zurück und kopieren Sie die erste Codezeile, die Folgendes enthält:

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

    Screenshot des Quelltextes

  16. Wechseln Sie zu Ihrem Code-Editor und öffnen Sie die Datei Web -> Übung -> index.html erneut.

  17. Fügen Sie den <div>-Code in Zeile 67 in <body> der Datei unter dem Kommentar HINWEIS: ÜBUNG 1: PDF-EINBETTUNGS-API-CODE EINFÜGEN ein.

    Screenshot der Stelle, an der Code eingefügt werden soll

  18. Kehren Sie zur Entwickler-Sandbox-Codevorschau zurück und kopieren Sie die Codezeilen für <script> unten:

    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. Wechseln Sie zu Ihrem Code-Editor und öffnen Sie die Datei Web -> Übung -> index.html erneut.

  20. Fügen Sie den Code "<script>" in Zeile 68 unter dem Tag "<div>" in "<body>" der Datei ein.

  21. Ändern Sie Zeile 70 derselben Datei index.html, um die zuvor erstellte clientID-Variable einzuschließen.

    Screenshot der Zeile 70

  22. Ändern Sie Zeile 72 derselben Datei index.html, um den Speicherort der PDF-Datei zu aktualisieren und eine lokale Datei zu verwenden.

    In den Tutorial-Dateien in /resources/pdfs/whitepaper.pdf ist eine verfügbar.

  23. Speichern Sie die geänderten Dateien und zeigen Sie eine Vorschau Ihrer Website an, indem Sie zu <your domain>/summit21/web/training/ navigieren.

    Sie sollten das technische Whitepaper-Rendering im Vollfenstermodus in Ihrem Browser sehen.

Teil 3: Zugriff auf Analytics-APIs part3

Nachdem Sie nun erfolgreich eine Webseite erstellt haben, auf der die PDF Embed-API eine PDF rendert, können Sie im dritten Teil sehen, wie JavaScript-Ereignisse zum Messen von Analysen verwendet werden, um zu verstehen, wie Benutzer PDF verwenden.

Auffinden von Dokumentation

Es gibt viele verschiedene JavaScript-Ereignisse, die als Teil der PDF Embed-API verfügbar sind. Sie können über die Adobe Acrobat Services-Dokumentation darauf zugreifen.

  1. Navigieren Sie zur Website Dokumentation.

  2. Überprüfen Sie die verschiedenen Ereignistypen, die als Teil der API verfügbar sind. Diese sind als Referenz nützlich und auch für zukünftige Projekte hilfreich.

    Screenshot des Referenzhandbuchs

  3. Kopieren Sie den Beispielcode, der auf der Website aufgeführt ist.

    Verwenden Sie dies als Grundlage für unseren Code und ändern Sie ihn.

    Screenshot, wohin der Beispielcode kopiert werden soll

    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. Suchen Sie den zuvor hinzugefügten Codeabschnitt, der wie der folgende aussieht, und hängen Sie den obigen Code nach diesem Code in index.html an:

    Screenshot der Stelle, an der Code eingefügt werden soll

  5. Laden Sie die Seite in Ihren Webbrowser und öffnen Sie die Konsole, um die Konsolenausgaben aus den verschiedenen Ereignissen anzuzeigen, während Sie mit dem PDF-Viewer interagieren.

    Screenshot des Ladens der Seite

    Screenshot des Codes zum Laden der Seite

Schalter zum Erfassen von Ereignissen hinzufügen

Nachdem Sie die Ereignisse in console.log ausgegeben haben, ändern wir das Verhalten, je nachdem, welche Ereignisse angezeigt werden. Dazu verwenden Sie ein Beispiel für einen Switch.

  1. Navigieren Sie zu snippets/eventsSwitch.js und kopieren Sie den Inhalt der Datei in den Tutorial-Code.

    Screenshot des Quelltextes

  2. Fügen Sie den Code in die Ereignis-Listener-Funktion ein.

    Screenshot der Stelle, an der Code eingefügt werden soll

  3. Überprüfen Sie, ob die Konsole korrekt ausgibt, wenn die Seite geladen wird und Sie mit dem PDF Viewer interagieren.

Adobe Analytics

Wenn Sie Ihrem Viewer Adobe Analytics-Support hinzufügen möchten, können Sie die auf der Website dokumentierten Anweisungen befolgen.

IMPORTANT
Auf Ihrer Webseite muss Adobe Analytics bereits auf der Seite in der Kopfzeile geladen sein.

Navigieren Sie zur Adobe Analytics-Dokumentation und überprüfen Sie, ob Adobe Analytics bereits auf Ihrer Webseite aktiviert ist. Folgen Sie den Anweisungen zum Einrichten einer reportSuite.

Google Analytics

Screenshot der Integration mit Google Analytics

Die Adobe PDF Embed-API bietet eine standardmäßige Integration mit Adobe Analytics. Da alle Events als JavaScript-Events verfügbar sind, ist es jedoch möglich, Google Analytics zu integrieren, indem PDF-Events erfasst und die Funktion ga() verwendet wird, um das Event zu Adobe Analytics hinzuzufügen.

  1. Navigieren Sie zu snippets/eventsSwitchGA.js, um zu sehen, wie Sie Google Analytics integrieren können.

  2. Überprüfen und verwenden Sie diesen Code als Beispiel, wenn Ihre Webseite mit Adobe Analytics verfolgt wird und sie bereits auf der Webseite eingebettet ist.

    Screenshot des Adobe Analytics-Codes

Teil 4: Interaktivität basierend auf Ereignissen hinzufügen part4

Im vierten Teil dieses Tutorials lernst du, wie du eine Paywall-Ebene über dem PDF-Viewer anlegst. Diese Paywall-Ebene wird nach dem Scrollen über die zweite Seite angezeigt.

Paywall-Beispiel

Navigieren Sie zu diesem Beispiel einer PDF hinter einer Paywall. In diesem Beispiel erfahren Sie, wie Sie Interaktivität zusätzlich zu einem PDF-Anwendererlebnis hinzufügen.

Paywall-Code hinzufügen

  1. Gehen Sie zu snippets/paywallCode.html und kopieren Sie den Inhalt.

  2. Suchen Sie in exercise/index.html nach <!-- TODO: EXERCISE 3: INSERT PAYWALL CODE -->.

    Screenshot des Quelltextes

  3. Fügen Sie den kopierten Code nach dem Kommentar ein.

  4. Wechseln Sie zu snippets/paywallCode.js und kopieren Sie den Inhalt.

    Screenshot der Stelle, an der Code eingefügt werden soll

  5. Fügen Sie den Code an diesem Speicherort ein.

Demo mit Paywall testen

Jetzt können Sie die Demo ansehen.

  1. Laden Sie index.html erneut auf Ihre Website.

  2. Scrollen Sie nach unten zu einer Seite > 2.

  3. Das Dialogfeld "Aufrufen" anzeigen, um den Benutzer nach der zweiten Seite herauszufordern.

    Screenshot der Demo

Weitere Ressourcen

Weitere Ressourcen finden Sie hier.

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