Beheer je online PDF-ervaring en verzamel analytics

Last update: Fri Aug 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Onderwerpen:
PDF Embed API

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 part1

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

Ga naar de Adobe.io-website.
Klikken Meer informatie onder Maak aansprekende documentervaringen.

Hiermee gaat u naar de Adobe Acrobat Services homepage.
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.
Klikken Aan de slag knop onder Nieuwe referenties maken.

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

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

Schermafbeelding van referenties

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.
Klikken Documentatie weergeven voor meer informatie over het gebruik van deze API.

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

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.

Ga naar Adobe Acrobat Services website.
Klikken API's in de navigatiebalk, ga dan naar de PDF Embed-API in de vervolgkeuzelijst.
Klikken Demo uitproberen.

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

Hier ziet u de opties voor de verschillende weergavemodi.
Klik op de verschillende weergavemodi voor Volledig venster, Container met grootte, In-line en Lichtbak.
Klikken Volledig venster weergavemodus, klikt u op de knop Aanpassen om opties in en uit te schakelen.
Uitschakelen Downloaden PDF.
Klikken Code genereren om de codevoorvertoning weer te geven.
Kopie Client-id in het venster Clientreferenties uit deel 1.
Open de Web -> middelen -> js -> dc-config.js in uw code-editor.

U zult zien dat de clientID variabele daar is.
Plak uw clientreferenties tussen de dubbele aanhalingstekens om de client-id in te stellen op uw referentie.
Ga terug naar de codevoorvertoning van de ontwikkelaarssandbox.

Kopieer de tweede regel met het Adobe-script:

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

Schermafbeelding van script

Ga naar uw code-editor en open de Web -> oefening -> index.html bestand.
Plak de scriptcode in de <head> van het bestand op regel 18 onder de opmerking waarin staat: TAAK: UITOEFENEN 1: INVOEGEN, API-SCRIPTTAG INVOEGEN.

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

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

Screenshot van waar code moet worden gekopieerd

Ga naar uw code-editor en open de Web -> oefening -> index.html bestand opnieuw.
Plak de <div> code in de <body> van het bestand op regel 67 onder de opmerking die TAAK: UITOEFENEN 1: API-CODE PDF INVOEGEN.

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

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>

Ga naar uw code-editor en open de Web -> oefening -> index.html bestand opnieuw.
Plak de <script> code in de <body> van het bestand op regel 68 onder de <div> -tag.
Regel 70 van hetzelfde wijzigen index.html bestand om de clientID-variabele op te nemen die eerder is gemaakt.
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.
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 part3

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.

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

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

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

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

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.

Navigeer naar snippets/eventsSwitch.js en kopieert u de inhoud van het bestand in de zelfstudiecode.
Plak de code in de gebeurtenislistenerfunctie.
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.

IMPORTANT

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.

Navigeer naar snippets/eventsSwitchGA.js om te zien hoe je kunt integreren met Google Analytics.
Bekijk en gebruik deze code als voorbeeld als uw webpagina wordt bijgehouden met Adobe Analytics en al is ingesloten op de webpagina.

Deel 4: Interactiviteit toevoegen op basis van gebeurtenissen part4

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

Ga naar snippets/paywallCode.html en kopieer de inhoud.
Zoeken naar  in exercise/index.html.
Plak de gekopieerde code na de opmerking.
Ga naar snippets/paywallCode.js en kopieert u de inhoud.
Plak de code op die locatie.

Demo uitproberen met Paywall

Nu kunt u de demo bekijken.

Opnieuw laden index.html op uw website.
Schuif omlaag naar een pagina > 2.
Het dialoogvenster weergeven verschijnt om de gebruiker na de tweede pagina uit te dagen.

Extra bronnen

Aanvullende bronnen vindt u hier.

recommendation-more-help

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