Controlla la tua esperienza online di PDF e raccogli analisi
La tua organizzazione pubblica PDF sul tuo sito Web? Scopri come utilizzare l’API Adobe PDF Embed per controllare l’aspetto, abilitare la collaborazione e raccogliere informazioni analitiche sulle modalità di interazione degli utenti con i PDF, incluso il tempo dedicato a una pagina e alle ricerche. Per iniziare questo tutorial pratico in 4 parti, seleziona Guida introduttiva all’API PDF Embed.
Parte 1: Guida introduttiva all’API PDF Embed part1
Nella parte 1, scopri come iniziare con tutto ciò di cui hai bisogno per le parti 1-3. Inizierai con il recupero delle credenziali API.
Cosa serve
- Risorse per l’esercitazione download
- Adobe ID ottieni qui
- Server Web (Nodo JS, PHP, ecc.)
- Conoscenza operativa di HTML / JavaScript / CSS
Che cosa stiamo utilizzando
- Un server Web di base (nodo)
- Codice di Visual Studio
- GitHub
Recupero delle credenziali
-
Vai a Sito Web Adobe.io.
-
Fai clic Ulteriori informazioni in Genera esperienze di documento coinvolgenti.
Viene visualizzato il Adobe Acrobat Services home page.
-
Fai clic Introduzione nella barra di navigazione.
Verrà visualizzata un'opzione Introduzione a Acrobat Services API a Crea nuove credenziali oppure Gestisci credenziali esistenti.
-
Fai clic Introduzione pulsante sotto Crea nuove credenziali.
-
Scegli il API PDF Embed e aggiungi un nome di credenziali di tua scelta e un dominio dell’applicazione nella finestra successiva.
note note NOTE Queste credenziali possono essere utilizzate solo nel dominio applicazione elencato qui. Puoi utilizzare qualsiasi dominio scelto. -
Fai clic Crea credenziali.
Nella pagina finale della procedura guidata vengono forniti i dettagli delle credenziali client. Lascia aperta questa finestra in modo da potervi tornare e copiare l’ID client (chiave API) per un utilizzo successivo.
-
Fai clic Visualizza documentazione per consultare la documentazione con informazioni dettagliate su come utilizzare questa API.
Parte 2: aggiunta dell’API PDF Embed a una pagina Web part2
Nella parte 2, scoprirai come incorporare facilmente l’API PDF Embed in una pagina Web. A tale scopo, utilizza la demo online di Adobe PDF Embed API per creare il nostro codice.
Ottieni il codice dell'esercizio
Abbiamo creato il codice da utilizzare. Sebbene sia possibile utilizzare il codice personalizzato, le dimostrazioni verranno eseguite nel contesto delle risorse per l'esercitazione. Scarica codice di esempio qui.
-
Vai a Adobe Acrobat Services sito Web.
-
Fai clic API nella barra di navigazione, quindi passare al API PDF Embed pagina nel collegamento a discesa.
-
Fai clic Prova la demo.
Viene visualizzata una nuova finestra con la sandbox dello sviluppatore per l’API PDF Embed.
Qui puoi vedere le opzioni per le diverse modalità di visualizzazione.
-
Fate clic sulle diverse modalità di visualizzazione per Finestra intera, Contenitore dimensioni, In linea e Lightbox.
-
Fai clic Finestra intera modalità di visualizzazione, quindi fare clic sul pulsante Personalizza per attivare e disattivare le opzioni.
-
Disabilita Scarica Opzione PDF.
-
Fai clic Genera codice per visualizzare l'anteprima del codice.
-
Copia ID client dalla finestra Credenziali client della Parte 1.
-
Apri il pannello Web -> risorse -> js -> dc-config.js nell'editor di codice.
Verrà visualizzata la variabile clientID.
-
Incolla le credenziali client tra virgolette per impostare l’ID client sulle credenziali.
-
Torna all’anteprima del codice sandbox per sviluppatori.
-
Copiare la seconda riga con lo script di Adobe:
code language-none <script src=https://documentccloud.adobe.com/view-sdk/main.js></script>
-
Accedi all’editor del codice e apri il Web -> esercizio -> index.html file.
-
Incollare il codice script nel
<head>
del file alla riga 18 sotto il commento che dice: TODO: ESERCIZIO 1: INSERIRE IL TAG SCRIPT API EMBED. -
Torna all’anteprima del codice sandbox per sviluppatori e copia la prima riga di codice che presenta:
code language-none <div id="adobe-dc-view"></div>
-
Accedi all’editor del codice e apri il Web -> esercizio -> index.html file di nuovo.
-
Incolla
<div>
inserisci il codice nel<body>
del file alla riga 67 sotto il commento che dice TODO: ESERCIZIO 1: INSERIRE IL CODICE API PDF EMBED. -
Torna all’anteprima del codice sandbox per sviluppatori e copia le righe di codice per
<script>
di seguito: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>
-
Accedi all’editor del codice e apri il Web -> esercizio -> index.html file di nuovo.
-
Incolla
<script>
inserisci il codice nel<body>
del fascicolo alla riga 68 sotto la<div>
tag. -
Modificare la riga 70 della stessa index.html per includere la variabile clientID creata in precedenza.
-
Modificare la riga 72 della stessa index.html file per aggiornare il percorso del file PDF in modo da utilizzare un file locale.
Ce n'è uno disponibile nei file dell'esercitazione in /resources/pdfs/whitepaper.pdf.
-
Salvate i file modificati e visualizzate in anteprima il sito Web selezionando
<your domain>
/summit21/web/esercizio/.Dovresti visualizzare il rendering del white paper tecnico in modalità a finestra intera all’interno del browser.
Parte 3: Accesso alle API di Analytics part3
Dopo aver creato correttamente una pagina Web con API PDF Embed che esegue il rendering di un PDF, nella parte 3 è ora possibile scoprire come utilizzare gli eventi JavaScript per misurare le analisi e comprendere come gli utenti utilizzano i PDF.
Ricerca della documentazione
Nell’API PDF Embed sono disponibili numerosi eventi JavaScript diversi. Puoi accedervi da Adobe Acrobat Services documentazione.
-
Passare alla documentazione sito.
-
Esamina i diversi tipi di evento disponibili come parte dell’API. Queste sono utili come riferimento e saranno utili anche per i tuoi progetti futuri.
-
Copiare il codice di esempio elencato nel sito Web.
Utilizzalo come base per il nostro codice e modificalo.
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 );
-
Individuare la sezione del codice aggiunta in precedenza che ha l'aspetto seguente e aggiungere il codice sopra riportato dopo questo codice in index.html:
-
Caricate la pagina nel browser Web e aprite la console per visualizzare gli output della console dai diversi eventi mentre interagite con il visualizzatore PDF.
Aggiungi switch per l’acquisizione di eventi
Ora che hai gli eventi in output su console.log, cambiamo il comportamento in base agli eventi. A tale scopo, verrà utilizzato un esempio di switch.
-
Passa a snippets/eventsSwitch.js e copiare il contenuto del file nel codice del tutorial.
-
Incollare il codice nella funzione listener di eventi.
-
Verificate che l’output della console sia corretto quando la pagina viene caricata e che interagiate con il visualizzatore di PDF.
Adobe Analytics
Se desideri aggiungere il supporto di Adobe Analytics al tuo visualizzatore, puoi seguire le istruzioni documentate sul sito Web.
Passare alla Documentazione di Adobe Analytics e verifica se Adobe Analytics è già abilitato sulla tua pagina Web. Seguire le istruzioni per configurare una ReportSuite.
Google Analytics
L’API Adobe PDF Embed fornisce un’integrazione pronta per l’uso con Adobe Analytics. Tuttavia, poiché tutti gli eventi sono disponibili come eventi JavaScript, è possibile integrarli con la Google Analytics acquisendo gli eventi PDF e utilizzando la funzione ga() per aggiungere l’evento ad Adobe Analytics.
-
Passa a snippets/eventsSwitchGA.js per scoprire come integrarsi con la Google Analytics.
-
Rivedi e utilizza questo codice come esempio se la tua pagina Web viene monitorata utilizzando Adobe Analytics e è già incorporata nella pagina Web.
Parte 4: Aggiungere interattività in base agli eventi part4
Nella parte 4, scoprirai come sovrapporre al tuo visualizzatore di PDF una busta paga che appare dopo aver scorrere oltre la seconda pagina.
Esempio di paywall
Passa a questo esempio di PDF dietro un paywall. In questo esempio imparerai ad aggiungere interattività sopra un'esperienza di visualizzazione PDF.
Aggiungi codice paywall
-
Visita il sito snippets/paywallCode.html e copia il contenuto.
-
Cerca
<!-- TODO: EXERCISE 3: INSERT PAYWALL CODE -->
in exercise/index.html. -
Incolla il codice copiato dopo il commento.
-
Vai a snippets/paywallCode.js e copiarne il contenuto.
-
Incollare il codice in tale posizione.
Prova demo con Paywall
Ora puoi visualizzare la demo.
-
Ricarica index.html sul tuo sito Web.
-
Scorri verso il basso fino a una pagina > 2.
-
Mostra la finestra di dialogo visualizzata per sfidare l'utente dopo la seconda pagina.
Risorse aggiuntive
Ulteriori risorse qui.