Controlla la tua esperienza online di PDF e raccogli analisi

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

Argomenti:
PDF Embed API

Creato per:

Intermediate
Developer

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

Parte 2: aggiunta dell’API PDF Embed a una pagina Web

Parte 3: Accesso alle API di Analytics

Parte 4: Aggiungere interattività in base agli eventi

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.

Schermata delle credenziali

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>`

Schermata dello 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>`

Schermata da dove copiare il codice

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

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>

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.

Schermata da dove copiare il codice di esempio

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

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.

IMPORTANT

È necessario che Adobe Analytics sia già caricato nella pagina Web nell’intestazione.

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

Schermata di integrazione con la 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  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.

recommendation-more-help

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