PDF-Onlineerlebnis kontrollieren und Analysen einholen

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

Themen:

Erstellt für:

Fortgeschrittener
Entwickler

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

Teil 2: Hinzufügen der PDF Embed-API zu einer Webseite

Teil 3: Zugriff auf Analytics-APIs

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

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

Rufen Sie die Website Adobe.io auf.
Klicken Sie auf Weitere Informationen unter Erstellen ansprechender Dokumenterlebnisse.

Dadurch gelangen Sie zur Startseite von Adobe Acrobat Services.
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.
Klicken Sie auf die Schaltfläche Erste Schritte unter Neue Anmeldeinformationen erstellen.

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

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.
Klicken Sie auf Dokumentation anzeigen, um die Dokumentation mit detaillierten Informationen zur Verwendung dieser API aufzurufen.

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.

Gehen Sie zu Adobe Acrobat Services Website.
Klicken Sie in der Navigationsleiste auf APIs, und navigieren Sie dann im Dropdown-Link zur Seite PDF Embed API.
Klicken Sie auf Demo testen.

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

Hier sehen Sie die Optionen für die verschiedenen Anzeigemodi.
Klicken Sie auf die verschiedenen Anzeigemodi für "Volles Fenster", "Größter Container", "Inline" und "Leuchtpult".
Klicken Sie auf Volles Fenster, Anzeigemodus, und klicken Sie dann auf die Schaltfläche Anpassen, um die Optionen ein- und auszuschalten.
Deaktivieren Sie die Option PDF herunterladen.
Klicken Sie auf die Schaltfläche Code generieren, um die Codevorschau anzuzeigen.
Kopieren Sie Client-ID aus dem Fenster Client-Anmeldeinformationen aus Teil 1.
Öffnen Sie die Datei Web -> Ressourcen -> js -> dc-config.js in Ihrem Code-Editor.

Die Variable "clientID" ist bereits vorhanden.
Fügen Sie Ihre Client-Anmeldedaten zwischen den doppelten Anführungszeichen ein, um die clientID auf Ihre Anmeldedaten festzulegen.
Kehren Sie zur Entwickler-Sandbox-Codevorschau zurück.

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

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

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

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

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

code language-none

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>`

<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>

Wechseln Sie zu Ihrem Code-Editor und öffnen Sie die Datei Web -> Übung -> index.html erneut.
Fügen Sie den Code "<script>" in Zeile 68 unter dem Tag "<div>" in "<body>" der Datei ein.
Ändern Sie Zeile 70 derselben Datei index.html, um die zuvor erstellte clientID-Variable einzuschließen.
Ä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.
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.

Navigieren Sie zur Website Dokumentation.
Ü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.

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

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 );`

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
);

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:
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.

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.

Navigieren Sie zu snippets/eventsSwitch.js und kopieren Sie den Inhalt der Datei in den Tutorial-Code.
Fügen Sie den Code in die Ereignis-Listener-Funktion ein.
Ü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.

Navigieren Sie zu snippets/eventsSwitchGA.js, um zu sehen, wie Sie Google Analytics integrieren können.
Ü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.

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

Gehen Sie zu snippets/paywallCode.html und kopieren Sie den Inhalt.
Suchen Sie in exercise/index.html nach .
Fügen Sie den kopierten Code nach dem Kommentar ein.
Wechseln Sie zu snippets/paywallCode.js und kopieren Sie den Inhalt.
Fügen Sie den Code an diesem Speicherort ein.

Demo mit Paywall testen

Jetzt können Sie die Demo ansehen.

Laden Sie index.html erneut auf Ihre Website.
Scrollen Sie nach unten zu einer Seite > 2.
Das Dialogfeld "Aufrufen" anzeigen, um den Benutzer nach der zweiten Seite herauszufordern.

Weitere Ressourcen

Weitere Ressourcen finden Sie hier.

recommendation-more-help

61c3404d-2baf-407c-beb9-87b95f86ccab