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

  1. Vai a Sito Web Adobe.io.

  2. Fai clic Ulteriori informazioni in Genera esperienze di documento coinvolgenti.

    Schermata del pulsante Ulteriori informazioni

    Viene visualizzato il Adobe Acrobat Services home page.

  3. Fai clic Introduzione nella barra di navigazione.

    Verrà visualizzata un'opzione Introduzione a Acrobat Services API a Crea nuove credenziali oppure Gestisci credenziali esistenti.

  4. Fai clic Introduzione pulsante sotto Crea nuove credenziali.

    Schermata del pulsante Inizia

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

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

  7. Fai clic Visualizza documentazione per consultare la documentazione con informazioni dettagliate su come utilizzare questa API.

    Schermata del pulsante Crea credenziali

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.

  1. Vai a Adobe Acrobat Services sito Web.

    Schermata di Adobe Acrobat Services sito Web

  2. Fai clic API nella barra di navigazione, quindi passare al API PDF Embed pagina nel collegamento a discesa.

    Schermata del menu a discesa delle API di PDF Embed

  3. Fai clic Prova la demo.

    Viene visualizzata una nuova finestra con la sandbox dello sviluppatore per l’API PDF Embed.

    Schermata della demo Prova

    Qui puoi vedere le opzioni per le diverse modalità di visualizzazione.

  4. Fate clic sulle diverse modalità di visualizzazione per Finestra intera, Contenitore dimensioni, In linea e Lightbox.

    Schermata delle modalità di visualizzazione

  5. Fai clic Finestra intera modalità di visualizzazione, quindi fare clic sul pulsante Personalizza per attivare e disattivare le opzioni.

    Schermata del pulsante Personalizza

  6. Disabilita Scarica Opzione PDF.

  7. Fai clic Genera codice per visualizzare l'anteprima del codice.

  8. Copia ID client dalla finestra Credenziali client della Parte 1.

    Schermata dellID client

  9. Apri il pannello Web -> risorse -> js -> dc-config.js nell'editor di codice.

    Verrà visualizzata la variabile clientID.

  10. Incolla le credenziali client tra virgolette per impostare l’ID client sulle credenziali.

  11. Torna all’anteprima del codice sandbox per sviluppatori.

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

  13. Accedi all’editor del codice e apri il Web -> esercizio -> index.html file.

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

    Schermata in cui incollare il codice script

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

  16. Accedi all’editor del codice e apri il Web -> esercizio -> index.html file di nuovo.

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

    Schermata in cui incollare il codice

  18. 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>
    
  19. Accedi all’editor del codice e apri il Web -> esercizio -> index.html file di nuovo.

  20. Incolla <script> inserisci il codice nel <body> del fascicolo alla riga 68 sotto la <div> tag.

  21. Modificare la riga 70 della stessa index.html per includere la variabile clientID creata in precedenza.

    Schermata della linea 70

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

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

  1. Passare alla documentazione sito.

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

    Schermata della guida di riferimento

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

    Schermata in cui incollare il codice

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

    Schermata di caricamento della pagina

    Schermata del codice per il caricamento della pagina

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.

  1. Passa a snippets/eventsSwitch.js e copiare il contenuto del file nel codice del tutorial.

    Schermata da dove copiare il codice

  2. Incollare il codice nella funzione listener di eventi.

    Schermata in cui incollare il codice

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

  1. Passa a snippets/eventsSwitchGA.js per scoprire come integrarsi con la Google Analytics.

  2. Rivedi e utilizza questo codice come esempio se la tua pagina Web viene monitorata utilizzando Adobe Analytics e è già incorporata nella pagina Web.

    Schermata del codice Adobe Analytics

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

  1. Visita il sito snippets/paywallCode.html e copia il contenuto.

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

    Schermata da dove copiare il codice

  3. Incolla il codice copiato dopo il commento.

  4. Vai a snippets/paywallCode.js e copiarne il contenuto.

    Schermata in cui incollare il codice

  5. Incollare il codice in tale posizione.

Prova demo con Paywall

Ora puoi visualizzare la demo.

  1. Ricarica index.html sul tuo sito Web.

  2. Scorri verso il basso fino a una pagina > 2.

  3. Mostra la finestra di dialogo visualizzata per sfidare l'utente dopo la seconda pagina.

    Schermata di visualizzazione della demo

Risorse aggiuntive

Ulteriori risorse qui.

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