Styr din onlineupplevelse i PDF och samla in analyser

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

Ämnen:

Skapat för:

Mellanliggande
Utvecklare

Publicerar din organisation PDF på din webbplats? Lär dig hur du använder Adobe PDF Embed API för att kontrollera utseende, aktivera samarbetsfunktioner och samla in analyser om hur användare interagerar med PDF, inklusive tid på en sida och sökningar. Inled den här praktiska självstudiekursen med fyra delar genom att välja Komma igång med PDF Embed API.

Del 1: Komma igång med PDF Embed API

Del 2: Lägger till PDF Embed API på en webbsida

Del 3: Åtkomst till Analytics API:er

Del 4: Lägg till interaktivitet baserat på händelser

Del 1: Komma igång med PDF Embed API part1

I del 1 lär du dig hur du kommer igång med allt du behöver för delarna 1-3. Du börjar med att få API-inloggningsuppgifter.

Vad du behöver

Självstudieresurser hämtas
Adobe ID skaffa ett här
Webbserver (nod JS, PHP osv.)
Arbetskunskaper om HTML / JavaScript / CSS

Vad vi använder

En grundläggande webbserver (nod)
Visual Studio Code
GitHub

Hämtar autentiseringsuppgifter

Gå till webbplatsen Adobe.io.
Klicka på Läs mer under Skapa engagerande dokumentupplevelser.

Du kommer då till startsidan för Adobe Acrobat Services.
Klicka på Kom igång i navigeringsfältet.

Du ser ett alternativ i Kom igång med Acrobat Services API:er för att skapa nya autentiseringsuppgifter eller hantera befintliga autentiseringsuppgifter.
Klicka på knappen Kom igång under Skapa nya autentiseringsuppgifter.

Markera alternativknappen PDF Embed API och lägg till valfritt inloggningsnamn och en programdomän i nästa fönster.

note note
NOTE
Dessa autentiseringsuppgifter kan bara användas för den programdomän som anges här. Du kan använda vilken domän som helst.

Skärmbild av autentiseringsuppgifter

Klicka på Skapa autentiseringsuppgifter.

På den sista sidan i guiden får du information om dina klientautentiseringsuppgifter. Lämna det här fönstret öppet så att du kan komma tillbaka till det och kopiera klient-ID:t (API-nyckel) för senare bruk.
Klicka på Visa dokumentation om du vill gå till dokumentationen med detaljerad information om hur du använder detta API.

Del 2: Lägga till PDF Embed API till en webbsida part2

I del 2, du kommer att lära dig hur du enkelt bädda in PDF Embed API i en webbsida. Du gör det genom att använda Adobe PDF Embed API online-demo för att skapa vår kod.

Hämta träningskoden

Vi har skapat kod som du kan använda. Du kan använda din egen kod, men demonstrationerna sker i samband med självstudieresurserna. Hämta exempelkoden här.

Gå till Adobe Acrobat Services webbplats.
Klicka på API:er i navigeringsfältet och gå sedan till sidan PDF Embed API i listrutan.
Klicka på Prova demon.

Ett nytt fönster visas med utvecklarsandlådan för PDF Embed API.

Här visas alternativen för de olika visningslägena.
Klicka på de olika visningslägena för Helfönster, Behållare i storlek, Inline och Ljuslåda.
Klicka på visningsläget Fullständigt fönster och klicka sedan på knappen Anpassa för att aktivera och inaktivera alternativen.
Inaktivera alternativet Hämta PDF.
Klicka på knappen Generera kod för att se kodförhandsgranskningen.
Kopiera Klient-ID från fönstret Klientautentiseringsuppgifter från del 1.
Öppna filen Webb -> resurser -> js -> dc-config.js i kodredigeraren.

Du ser att variabeln clientID finns där.
Klistra in klientautentiseringsuppgifterna mellan de dubbla citattecknen för att ange klient-ID till dina autentiseringsuppgifter.
Gå tillbaka till kodförhandsgranskningen för utvecklarsandlådan.

Kopiera den andra raden som har skriptet Adobe:

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

Skärmbild av skript

Gå till kodredigeraren och öppna filen Webb -> övning -> index.html.
Klistra in skriptkoden i <head> i filen på rad 18 under kommentaren som säger: TODO: EXERCISE 1: INSERT EMBED API SCRIPT TAG.

Gå tillbaka till kodförhandsgranskningen för utvecklarsandlådan och kopiera den första kodraden som har:

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

Skärmbild av var koden ska kopieras

Gå till kodredigeraren och öppna filen Webb -> övning -> index.html igen.
Klistra in <div>-koden i <body> i filen på rad 67 under kommentaren som säger TODO: EXERCISE 1: INSERT PDF EMBED API CODE.

Gå tillbaka till kodförhandsgranskningen för utvecklarsandlådan och kopiera kodraderna för <script> nedan:

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>

Gå till kodredigeraren och öppna filen Webb -> övning -> index.html igen.
Klistra in <script>-koden i <body> i filen på rad 68 under taggen <div>.
Ändra rad 70 i samma index.html-fil för att inkludera variabeln clientID som skapades tidigare.
Ändra rad 72 i samma index.html-fil om du vill uppdatera platsen för PDF-filen så att den använder en lokal fil.

Det finns en i självstudiekursfilerna i /resources/pdfs/whitepaper.pdf.
Spara dina ändrade filer och förhandsgranska webbplatsen genom att bläddra till <your domain>/Summit21/web/motion/.

Du bör se den tekniska vitboken återges i helfönsterläge i webbläsaren.

Del 3: Åtkomst till Analytics API:er part3

Nu när du har skapat en webbsida där PDF Embed API har renderat ett PDF kan du i del 3 utforska hur du använder JavaScript-händelser för att mäta analyser för att förstå hur användare använder PDF.

Hitta dokumentation

Det finns en hel del olika JavaScript-händelser tillgängliga som en del av PDF Embed API. Du kan komma åt dem från dokumentationen för Adobe Acrobat Services.

Gå till webbplatsen dokumentation.
Granska de olika händelsetyperna som är tillgängliga som en del av API:et. De är användbara som referens och kommer också att vara till hjälp för dina framtida projekt.

Kopiera exempelkoden på webbplatsen.

Använd den här koden som grund för vår kod och ändra den.

Skärmbild av var exempelkoden ska kopieras

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

Leta reda på det kodavsnitt som du lade till tidigare och som ser ut så här nedan. Lägg till koden ovan i index.html:
Läs in sidan i webbläsaren och öppna konsolen för att visa konsolutdata från de olika händelserna när du interagerar med visningsprogrammet för PDF.

Lägg till brytare för att hämta händelser

Nu när du har de händelser som matas ut till console.log ska vi ändra beteendet utifrån vilka händelser som inträffar. För att göra det använder du ett exempel.

Gå till snippets/eventsSwitch.js och kopiera innehållet i filen i självstudiekursen.
Klistra in koden i händelseavlyssnarfunktionen.
Kontrollera att konsolen matas ut korrekt när sidan har lästs in och att du interagerar med visningsprogrammet för PDF.

Adobe Analytics

Om du vill lägga till Adobe Analytics-support till din läsare kan du följa anvisningarna som finns dokumenterade på webbplatsen.

IMPORTANT

Din webbsida måste redan ha Adobe Analytics inläst på sidan i sidhuvudet.

Gå till Adobe Analytics-dokumentationen och granska om Adobe Analytics redan är aktiverat på webbsidan. Följ instruktionerna för att konfigurera en reportSuite.

Google Analytics

Skärmbild av hur du integrerar med Google Analytics

Adobe PDF Embed API tillhandahåller färdig integrering med Adobe Analytics. Men eftersom alla händelser finns tillgängliga som JavaScript-händelser går det att integrera med Google Analytics genom att hämta PDF-händelser och använda ga()-funktionen för att lägga till händelsen i Adobe Analytics.

Gå till snippets/eventsSwitchGA.js om du vill se hur du kan integrera med Google Analytics.
Granska och använd den här koden som ett exempel om din webbsida spåras med Adobe Analytics och redan är inbäddad på webbsidan.

Del 4: Lägg till interaktivitet baserat på händelser part4

I del 4 går du igenom hur du lägger en betalvägg ovanpå din PDF-tittare som syns efter att du har bläddrat förbi den andra sidan.

Exempel på betalvägg

Navigera till exemplet på en PDF bakom en betalvägg. I det här exemplet får du lära dig att lägga till interaktivitet utöver en visningsupplevelse i PDF.

Lägg till betalvägskod

Gå till snippets/paywallCode.html och kopiera innehållet.
Sök efter  på exercise/index.html.
Klistra in den kopierade koden efter kommentaren.
Gå till snippets/paywallCode.js och kopiera innehållet.
Klistra in koden på den platsen.