Styr din onlineupplevelse i PDF och samla in analyser

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 i fyra delar genom att välja Komma igång med PDF Embed API.

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

  • Resurser för självstudiekurser hämtning
  • Adobe ID hämta en 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

  1. Gå till Webbplatsen Adobe.io.

  2. Klicka Läs mer under Skapa engagerande dokumentupplevelser.

    Skärmbild av knappen Läs mer

    Detta tar dig till Adobe Acrobat Services startsida.

  3. Klicka Kom igång i navigeringsfältet.

    Du ser ett alternativ i Kom igång med Acrobat Services API:er till Skapa nya autentiseringsuppgifter eller Hantera befintliga autentiseringsuppgifter.

  4. Klicka Kom igång knapp under Skapa nya autentiseringsuppgifter.

    Skärmbild av knappen Kom igång

  5. Välj 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 inloggningsuppgifter

  6. Klicka 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.

  7. Klicka Visa dokumentation om du vill gå till dokumentationen med detaljerad information om hur du använder detta API.

    Skärmbild av knappen Skapa autentiseringsuppgifter

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 exempelkod här.

  1. Gå till Adobe Acrobat Services webbplats.

    Skärmbild av Adobe Acrobat Services webbplats

  2. Klicka API:er i navigeringsfältet går du till PDF Embed API i rullgardinsmenyn.

    Skärmbild av listrutan PDF Embed API

  3. Klicka Testa demon.

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

    Skärmdump av Try the demo

    Här visas alternativen för de olika visningslägena.

  4. Klicka på de olika visningslägena för Helfönster, Behållare i storlek, Inline och Ljuslåda.

    Skärmbild av visningslägen

  5. Klicka Hela fönstret visningsläge och klicka sedan på Anpassa för att slå på och av alternativen.

    Skärmbild av Anpassa knapp

  6. Inaktivera Hämta PDF.

  7. Klicka Generera kod för att se kodförhandsgranskningen.

  8. Kopiera Klient-ID från fönstret Klientautentiseringsuppgifter i del 1.

    Skärmbild av klient-ID

  9. Öppna fönstret Webb -> resources -> js -> dc-config.js -filen i kodredigeraren.

    Du ser att variabeln clientID finns där.

  10. Klistra in klientautentiseringsuppgifterna mellan de dubbla citattecknen för att ange klient-ID till dina autentiseringsuppgifter.

  11. Gå tillbaka till kodförhandsgranskningen för utvecklarsandlådan.

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

  13. Gå till kodredigeraren och öppna Webb -> utöva -> index.html fil.

  14. Klistra in skriptkoden i <head> av filen på rad 18 under kommentaren som lyder: ATT GÖRA: ÖVNING 1: INFOGA INBÄDDAD API SCRIPT-TAGG.

    Skärmbild av var skriptkoden ska klistras in

  15. 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 kod ska kopieras

  16. Gå till kodredigeraren och öppna Webb -> utöva -> index.html igen.

  17. Klistra in <div> kod i <body> av akten på rad 67 under kommentaren som säger ATT GÖRA: ÖVNING 1: INFOGA PDF INBÄDDNINGS-API-KOD.

    Skärmbild av var kod ska klistras in

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

    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. Gå till kodredigeraren och öppna Webb -> utöva -> index.html igen.

  20. Klistra in <script> kod i <body> på rad 68 under rubriken <div> tagg.

  21. Ändra rad 70 av samma index.html -filen för att inkludera variabeln clientID som skapades tidigare.

    Skärmbild av linje 70

  22. Ändra rad 72 av samma index.html -filen för att uppdatera platsen för PDF-filen så att den använder en lokal fil.

    Det finns ett tillgängligt i självstudiekursfilerna i /resources/pdfs/whitepaper.pdf.

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

  1. Gå till dokumentation -plats.

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

    Skärmbild av referensguide

  3. 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
    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. Hitta det kodavsnitt som du lade till tidigare som ser ut så här nedan och lägg till koden ovan efter den här koden i index.html:

    Skärmbild av var kod ska klistras in

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

    Skärmbild av inläsning av sidan

    Skärmbild av koden för att läsa in sidan

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.

  1. Gå till snippets/eventsSwitch.js och kopiera innehållet i filen i självstudiekurskoden.

    Skärmbild av var kod ska kopieras

  2. Klistra in koden i händelseavlyssnarfunktionen.

    Skärmbild av var kod ska klistras in

  3. 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-dokumentation och granska om du redan har aktiverat Adobe Analytics på din webbsida. Följ instruktionerna för att konfigurera en reportSuite.

Google Analytics

Skärmbild som visar 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.

  1. Gå till snippets/eventsSwitchGA.js för att se hur du kan integrera dig med Google Analytics.

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

    Skärmbild av Adobe Analytics-kod

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

  1. Gå till snippets/paywallCode.html och kopiera innehållet.

  2. Sök efter <!-- TODO: EXERCISE 3: INSERT PAYWALL CODE --> i exercise/index.html.

    Skärmbild av var kod ska kopieras

  3. Klistra in den kopierade koden efter kommentaren.

  4. Gå till snippets/paywallCode.js och kopiera innehållet.

    Skärmbild av var kod ska klistras in

  5. Klistra in koden på den platsen.

Testa demo med betalvägg

Nu kan du visa demon.

  1. Läs in igen index.html på din webbplats.

  2. Bläddra ner till en sida > 2.

  3. Visa dialogrutan för att verifiera användaren efter den andra sidan.

    Skärmdump av att titta på demon

Ytterligare resurser

Ytterligare resurser finns här.

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