DocumentazioneAcrobat Services

Controlla la tua esperienza online di PDF e raccogli analisi

Last update: Fri Jul 19 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Argomenti:

Creato per:

  • Intermedio
  • Sviluppatore

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 1: introduzione all'API PDF Embed

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

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

Parte 3: Accesso alle API di Analytics

Parte 3: accesso alle API di analisi

Parte 4: Aggiungere interattività in base agli eventi

Parte 4: aggiunta di 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.

Requisiti

  • Risorse esercitazione download
  • scaricane uno qui da Adobe ID
  • Server Web (Nodo JS, PHP, ecc.)
  • Conoscenza operativa di HTML / JavaScript / CSS

Elementi in uso

  • Un server Web di base (nodo)
  • Codice di Visual Studio
  • GitHub

Recupero delle credenziali

  1. Passa al sito Web Adobe.io.

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

    Schermata del pulsante Ulteriori informazioni

    Viene visualizzata la home page di Adobe Acrobat Services.

  3. Fai clic su Introduzione nella barra di navigazione.

    Verrà visualizzata un'opzione in Introduzione alle API Acrobat Services per Creare nuove credenziali o Gestire le credenziali esistenti.

  4. Fai clic sul pulsante Inizia in Crea nuove credenziali.

    Schermata del pulsante Introduzione

  5. Scegliere il pulsante di scelta Incorpora API di PDF e aggiungere nella finestra successiva un nome credenziale desiderato e un dominio applicazione.

    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 su 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 su Visualizza documentazione per accedere alla 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 il codice di esempio qui.

  1. Vai al Adobe Acrobat Services sito Web.

    Schermata del sito Web Adobe Acrobat Services

  2. Fai clic su API nella barra di navigazione, quindi vai alla pagina PDF Embed API nel collegamento a discesa.

    Schermata del menu a discesa dellAPI PDF Embed

  3. Fai clic su Prova la demo.

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

    Schermata della demo

    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 sulla modalità di visualizzazione Finestra intera, quindi fai clic sul pulsante Personalizza per attivare e disattivare le opzioni.

    Schermata del pulsante Personalizza

  6. Disabilita l'opzione Scarica PDF.

  7. Fare clic sul pulsante Genera codice per visualizzare l'anteprima del codice.

  8. Copiare ID client dalla finestra Credenziali client dalla parte 1.

    Schermata dellID client

  9. Apri il file Web -> resources -> 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. Passa all’editor di codice e apri il file Web -> esercizio -> index.html.

  14. Incollare il codice script in <head> del file alla riga 18 sotto il commento seguente: TODO: ESERCIZIO 1: INSERT EMBED API SCRIPT TAG.

    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 in cui copiare il codice

  16. Passa all’editor di codice e apri nuovamente il file Web -> esercizio -> index.html.

  17. Incollare il codice <div> in <body> del file alla riga 67 sotto il commento TODO: ESERCIZIO 1: INSERT PDF EMBED API CODE.

    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. Passa all’editor di codice e apri nuovamente il file Web -> esercizio -> index.html.

  20. Incolla il codice <script> in <body> del file alla riga 68 sotto il tag <div>.

  21. Modificare la riga 70 dello stesso file index.html per includere la variabile clientID creata in precedenza.

    Schermata della riga 70

  22. Modificare la riga 72 dello stesso file index.html per aggiornare il percorso del file PDF in modo che utilizzi un file locale.

    Ne è disponibile uno nei file dell'esercitazione in /resources/pdfs/whitepaper.pdf.

  23. Salva i file modificati e visualizza in anteprima il tuo sito Web accedendo a <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 dalla documentazione di Adobe Acrobat Services.

  1. Accedi al sito documentazione.

  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 in cui 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. Trova la sezione di codice che hai aggiunto in precedenza che ha l'aspetto seguente e aggiungi 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 copia il contenuto del file nel codice del tutorial.

    Schermata in cui 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.

Passa alla documentazione Adobe Analytics e verifica se Adobe Analytics è già abilitato nella 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 vedere come puoi integrarti 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

Passare 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 in cui copiare il codice

  3. Incolla il codice copiato dopo il commento.

  4. Passa a snippets/paywallCode.js e copia 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 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 sono disponibili qui.

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