Beheer je online PDF-ervaring en verzamel analytics

Laatste update: 2023-08-04
  • Gemaakt voor:
  • Intermediate
    Developer

Plaatst uw organisatie PDF op uw website? Leer hoe u de Adobe PDF Embed API kunt gebruiken om het uiterlijk te beheren, samenwerking in te schakelen en analytics te verzamelen over de interactie van de gebruiker met PDF, waaronder de tijd die op een pagina wordt doorgebracht en zoekopdrachten. Selecteer Aan de slag met de PDF Embed-API.

Deel 1: Aan de slag met de PDF Embed-API Deel 2: API voor insluiten van PDF toevoegen aan een webpagina Deel 3: Toegang tot API's voor Analytics Deel 4: Interactiviteit toevoegen op basis van gebeurtenissen

Deel 1: Aan de slag met de PDF Embed-API

In deel 1 leert u hoe u aan de slag kunt gaan met alles wat u nodig hebt voor onderdelen 1-3. U begint met het ophalen van API-referenties.

Wat je nodig hebt

  • Bronnen voor zelfstudies downloaden
  • Adobe ID hier een ophalen
  • Webserver (Node JS, PHP, enz.)
  • Werkkennis van HTML / JavaScript / CSS

Wat we gebruiken

  • Een basiswebserver (knooppunt)
  • Visual Studio Code
  • GitHub

Inloggegevens ophalen

  1. Ga naar de Adobe.io-website.

  2. Klikken Meer informatie onder Maak aansprekende documentervaringen.

    Screenshot van de knop Meer informatie

    Hiermee gaat u naar de Adobe Acrobat Services homepage.

  3. Klikken Aan de slag in de navigatiebalk.

    U ziet een optie in Aan de slag met Acrobat Services API's aan Nieuwe referenties maken of Bestaande referenties beheren.

  4. Klikken Aan de slag knop onder Nieuwe referenties maken.

    Screenshot van de knop Aan de slag

  5. Kies de PDF Embed-API en voeg in het volgende venster een referentienaam van uw keuze en een toepassingsdomein toe.

    OPMERKING

    Deze referenties kunnen alleen worden gebruikt in het toepassingsdomein dat hier wordt vermeld. U kunt elk gewenst domein gebruiken.

    Schermafbeelding van referenties

  6. Klikken Referenties maken.

    Op de laatste pagina van de wizard vindt u de gegevens van de clientreferenties. Laat dit venster open zodat u er weer naar kunt terugkeren en de client-id (API-sleutel) voor later gebruik kunt kopiëren.

  7. Klikken Documentatie weergeven voor meer informatie over het gebruik van deze API.

    Screenshot van knop met aanmeldingsgegevens maken

Deel 2: API voor insluiten van PDF toevoegen aan een webpagina

In deel 2 leert u hoe u de PDF Embed-API gemakkelijk kunt insluiten in een webpagina. U doet dit door de online demo van de Adobe PDF Embed API te gebruiken om onze code te maken.

De oefencode ophalen

We hebben code gemaakt die je kunt gebruiken. Terwijl u uw eigen code kunt gebruiken, zullen de demonstraties plaatsvinden in de context van de leermiddelen. Voorbeeldcode downloaden hier.

  1. Ga naar Adobe Acrobat Services website.

    Screenshot van Adobe Acrobat Services website

  2. Klikken API's in de navigatiebalk, ga dan naar de PDF Embed-API in de vervolgkeuzelijst.

    Schermafbeelding van vervolgkeuzelijst PDF Embed API

  3. Klikken Demo uitproberen.

    Er verschijnt een nieuw venster met de ontwikkelaarssandbox voor PDF Embed API.

    Screenshot van de demo van Try

    Hier ziet u de opties voor de verschillende weergavemodi.

  4. Klik op de verschillende weergavemodi voor Volledig venster, Container met grootte, In-line en Lichtbak.

    Schermafbeelding van weergavemodi

  5. Klikken Volledig venster weergavemodus, klikt u op de knop Aanpassen om opties in en uit te schakelen.

    Screenshot van knop Aanpassen

  6. Uitschakelen Downloaden PDF.

  7. Klikken Code genereren om de codevoorvertoning weer te geven.

  8. Kopie Client-id in het venster Clientreferenties uit deel 1.

    Screenshot van client-id

  9. Open de Web -> middelen -> js -> dc-config.js in uw code-editor.

    U zult zien dat de clientID variabele daar is.

  10. Plak uw clientreferenties tussen de dubbele aanhalingstekens om de client-id in te stellen op uw referentie.

  11. Ga terug naar de codevoorvertoning van de ontwikkelaarssandbox.

  12. Kopieer de tweede regel met het Adobe-script:

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

    Schermafbeelding van script

  13. Ga naar uw code-editor en open de Web -> oefening -> index.html bestand.

  14. Plak de scriptcode in de <head> van het bestand op regel 18 onder de opmerking waarin staat: TAAK: UITOEFENEN 1: INVOEGEN, API-SCRIPTTAG INVOEGEN.

    Screenshot van waar scriptcode moet worden geplakt

  15. Ga terug naar de codevoorvertoning van de ontwikkelaarssandbox en kopieer de eerste coderegel die het volgende bevat:

    <div id="adobe-dc-view"></div>
    

    Screenshot van waar code moet worden gekopieerd

  16. Ga naar uw code-editor en open de Web -> oefening -> index.html bestand opnieuw.

  17. Plak de <div> code in de <body> van het bestand op regel 67 onder de opmerking die TAAK: UITOEFENEN 1: API-CODE PDF INVOEGEN.

    Screenshot van waar code moet worden geplakt

  18. Ga terug naar de codevoorvertoning van de ontwikkelaarssandbox en kopieer de coderegels voor de <script> hieronder:

    <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. Ga naar uw code-editor en open de Web -> oefening -> index.html bestand opnieuw.

  20. Plak de <script> code in de <body> van het bestand op regel 68 onder de <div> -tag.

  21. Regel 70 van hetzelfde wijzigen index.html bestand om de clientID-variabele op te nemen die eerder is gemaakt.

    Screenshot van regel 70

  22. Regel 72 van hetzelfde wijzigen index.html bestand om de locatie van het PDF-bestand bij te werken zodat een lokaal bestand wordt gebruikt.

    Er is één beschikbaar in de zelfstudiebestanden in /resources/pdfs/whitepaper.pdf.

  23. Sla de gewijzigde bestanden op en bekijk een voorvertoning van uw website door naar <your domain>/Summit21/web/oefening/.

    U moet de technische whitepaper weergeven in de modus Volledig venster van uw browser.

Deel 3: Toegang tot API's voor Analytics

Nu u een webpagina hebt gemaakt met PDF Embed API-rendering voor een PDF, kunt u in deel 3 nu onderzoeken hoe u JavaScript-gebeurtenissen kunt gebruiken om analyses te meten om te begrijpen hoe gebruikers PDF gebruiken.

Documentatie zoeken

Er zijn veel verschillende JavaScript-gebeurtenissen beschikbaar als onderdeel van de PDF Embed-API. U hebt vanuit Adobe Acrobat Services documentatie.

  1. Ga naar de documentatie site.

  2. Bekijk de verschillende gebeurtenistypen die beschikbaar zijn als onderdeel van de API. Deze zijn handig als referentie en zijn ook handig voor toekomstige projecten.

    Screenshot van referentiegids

  3. Kopieer de voorbeeldcode die op de website staat.

    Gebruik dit als basis voor onze code en wijzig deze.

    Screenshot van voorbeeldcode om te kopiëren

    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. Zoek de codesectie die u eerder hebt toegevoegd, die eruitziet als de onderstaande code en voeg de bovenstaande code na deze code toe in index.html:

    Screenshot van waar code moet worden geplakt

  5. Laad de pagina in uw webbrowser en open de Console om de consoleuitvoer van de verschillende gebeurtenissen te bekijken terwijl u met de PDF viewer werkt.

    Screenshot van het laden van de pagina

    Screenshot van de code voor het laden van de pagina

Schakel toevoegen voor het vastleggen van gebeurtenissen

Nu u de gebeurtenissen hebt die aan console.log worden uitgevoerd, laten we het gedrag veranderen op basis van welke gebeurtenissen. Om dit te doen, zult u een schakelaarvoorbeeld gebruiken.

  1. Navigeer naar snippets/eventsSwitch.js en kopieert u de inhoud van het bestand in de zelfstudiecode.

    Screenshot van waar code moet worden gekopieerd

  2. Plak de code in de gebeurtenislistenerfunctie.

    Screenshot van waar code moet worden geplakt

  3. Bevestig dat de consoleoutput correct wanneer de pagina wordt geladen en u met de PDF Kijker in wisselwerking staat.

Adobe Analytics

Als u Adobe Analytics-ondersteuning wilt toevoegen aan uw viewer, kunt u de instructies op de website volgen.

BELANGRIJK

Adobe Analytics moet al op de pagina in de koptekst zijn geladen.

Ga naar de Adobe Analytics-documentatie en bekijk of Adobe Analytics al op uw webpagina is ingeschakeld. Volg de instructies om een rapportsuite in te stellen.

Google Analytics

Screenshot van hoe je integreert met Google Analytics

Adobe PDF Embed API biedt kant-en-klare integratie met Adobe Analytics. Omdat alle gebeurtenissen echter beschikbaar zijn als JavaScript-gebeurtenissen, is het mogelijk om met Google Analytics te integreren door PDF-gebeurtenissen vast te leggen en de functie ga() te gebruiken om de gebeurtenis toe te voegen aan Adobe Analytics.

  1. Navigeer naar snippets/eventsSwitchGA.js om te zien hoe je kunt integreren met Google Analytics.

  2. Bekijk en gebruik deze code als voorbeeld als uw webpagina wordt bijgehouden met Adobe Analytics en al is ingesloten op de webpagina.

    Screenshot van Adobe Analytics-code

Deel 4: Interactiviteit toevoegen op basis van gebeurtenissen

In deel 4 gaat u door hoe u boven op uw PDF-viewer een paywall kunt toevoegen die wordt weergegeven nadat u voorbij de tweede pagina hebt geschoven.

Paywall-voorbeeld

Hiernaar navigeren voorbeeld van een PDF achter een paywall. In dit voorbeeld leert u interactiviteit toevoegen boven op een PDF-kijkervaring.

paywall-code toevoegen

  1. Ga naar snippets/paywallCode.html en kopieer de inhoud.

  2. Zoeken naar <!-- TODO: EXERCISE 3: INSERT PAYWALL CODE --> in exercise/index.html.

    Screenshot van waar code moet worden gekopieerd

  3. Plak de gekopieerde code na de opmerking.

  4. Ga naar snippets/paywallCode.js en kopieert u de inhoud.

    Screenshot van waar code moet worden geplakt

  5. Plak de code op die locatie.

Demo uitproberen met Paywall

Nu kunt u de demo bekijken.

  1. Opnieuw laden index.html op uw website.

  2. Schuif omlaag naar een pagina > 2.

  3. Het dialoogvenster weergeven verschijnt om de gebruiker na de tweede pagina uit te dagen.

    Screenshot van het bekijken van de demo

Extra bronnen

Aanvullende bronnen vindt u hier.

Op deze pagina