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

Was wir verwenden

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

Abrufen von Anmeldedaten

  1. Wechseln Sie zur Registerkarte Website von Adobe.io.

  2. Klicken Weitere Informationen unter Entwickeln Sie ansprechende Dokumentenerlebnisse.

    Screenshot der Schaltfläche Weitere Informationen

    Dadurch gelangen Sie zur Registerkarte Adobe Acrobat Services Startseite.

  3. Klicken Erste Schritte in der Navigationsleiste.

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

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

    Screenshot der Schaltfläche Erste Schritte

  5. Wählen Sie die 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 Anmeldedaten

  6. Klicken 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 Dokumentation anzeigen , um zur Dokumentation mit detaillierten Informationen zur Verwendung dieser API zu gelangen.

    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. Beispielcode herunterladen hier.

  1. Wechseln zu Adobe Acrobat Services Website.

    Screenshot von Adobe Acrobat Services Website

  2. Klicken API in der Navigationsleiste, und gehen Sie dann zur Registerkarte " PDF Embed-API " im Dropdown-Link auswählen.

    Screenshot der PDF Embed-API-Dropdown-Liste

  3. Klicken Demo testen.

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

    Screenshot der Demo

    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 Volles Fenster Anzeigemodus, klicken Sie dann auf das Symbol Anpassen , um Optionen ein- und auszuschalten.

    Screenshot der Schaltfläche Anpassen

  6. Deaktivieren Herunterladen PDF.

  7. Klicken Code generieren , um die Codevorschau anzuzeigen.

  8. Kopieren Client-ID im Fenster Client-Zugangsdaten aus Teil 1.

    Screenshot der Client-ID

  9. Öffnen Sie die 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 das Dialogfeld Web -> Übung -> index.html -Datei.

  14. Fügen Sie den Skriptcode in das <head> der Datei in Zeile 18 unter dem folgenden Kommentar: TODO: ÜBUNG 1: API-SKRIPT-TAG EINBETTEN.

    Screenshot der Stelle, an der 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 der Stelle, an der Code kopiert werden soll

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

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

    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 die <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 das Dialogfeld Web -> Übung -> index.html -Datei erneut aus.

  20. Fügen Sie die <script> in die <body> der Akte in Zeile 68 unter der Nummer <div> Tag.

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

    Screenshot der Zeile 70

  22. Änderungszeile 72 derselben 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.

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

    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 Adobe Acrobat Services Dokumentation.

  1. Navigieren Sie zur Registerkarte Dokumentation Website.

  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 der Stelle, an der 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 Code oben nach diesem Code an in index.html:

    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 der Stelle, an der Code kopiert werden soll

  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 Registerkarte Adobe Analytics - Dokumentation und überprüfen Sie, ob Adobe Analytics auf Ihrer Webseite bereits 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 Ereignisse jedoch als JavaScript-Ereignisse verfügbar sind, ist es möglich, eine Integration mit Google Analytics vorzunehmen, indem PDF-Ereignisse erfasst und die Funktion ga() verwendet wird, um das Ereignis zu Adobe Analytics hinzuzufügen.

  1. Navigieren Sie zu snippets/eventsSwitchGA.js , um zu sehen, wie du mit Google Analytics integrieren kannst.

  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 eines 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 nach <!-- TODO: EXERCISE 3: INSERT PAYWALL CODE --> in exercise/index.html.

    Screenshot der Stelle, an der Code kopiert werden soll

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

  4. Wechseln 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. Erneut laden index.html auf Ihrer 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 Informationsquellen: hier.

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