Controla la experiencia online de tu PDF y recopila análisis

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

Temas:
PDF Embed API

Creado para:

Intermediate
Developer

¿Su organización publica PDF en su sitio web? Aprenda a utilizar la API Adobe PDF Embed para controlar la apariencia, permitir la colaboración y recopilar análisis sobre cómo interactúan los usuarios con los PDF, incluido el tiempo dedicado a una página y las búsquedas. Para comenzar este tutorial práctico de 4 partes, seleccione Introducción a la API de incrustación de PDF.

Parte 1: Introducción a la API de incrustación de PDF

Parte 2: Añadir la API de incrustación de PDF a una página web

Parte 3: Acceso a las API de Analytics

Parte 4: Añadir interactividad basada en eventos

Parte 1: Introducción a la API de incrustación de PDF part1

En la parte 1, aprenda a empezar con todo lo que necesita para las partes 1-3. Empezará a obtener las credenciales de la API.

Lo que necesitas

Recursos del tutorial descargar
Adobe ID consigue uno aquí
Servidor web (Node JS, PHP, etc.)
Conocimiento del funcionamiento del HTML / JavaScript / CSS

Lo que estamos utilizando

Un servidor web básico (Node)
Visual Studio Code
GitHub

Obtención de credenciales

Vaya a la sitio web Adobe.io.
Haga clic en Más información en Crear experiencias de documentos atractivas.

Esto te lleva a la Adobe Acrobat Services página de inicio.
Haga clic en Introducción en la barra de navegación.

Verá una opción en la Primeros pasos con Acrobat Services API para Crear nuevas credenciales o Administrar credenciales existentes.
Haga clic en Introducción botón situado debajo Crear nuevas credenciales.

Elija el API de incrustación de PDF y añada un nombre de credencial de su elección y un dominio de aplicación en la siguiente ventana.

note note
NOTE
Estas credenciales solo se pueden utilizar en el dominio de aplicación que se muestra aquí. Puede utilizar cualquier dominio que elija.

Captura de pantalla de credenciales

Haga clic en Crear credenciales.

La página final del asistente proporciona los detalles de las credenciales de cliente. Deje esta ventana abierta para poder volver a ella y copiar el ID de cliente (clave de API) para usarlo más adelante.
Haga clic en Ver documentación para acceder a la documentación con información detallada sobre cómo utilizar esta API.

Parte 2: Añadir la API de incrustación de PDF a una página web part2

En la parte 2, aprenderás a incrustar fácilmente la API de incrustación de PDF en una página web. Para ello, utilizarás la demostración online de la API de Adobe PDF Embed API para crear tu código.

Obtener el código de ejercicio

Hemos creado código para que lo utilice. Aunque puede utilizar su propio código, las demostraciones se realizarán en el contexto de los recursos del tutorial. Descargar código de ejemplo aquí.

Vaya a Adobe Acrobat Services sitio web.
Haga clic en API en la barra de navegación y vaya a la API de incrustación de PDF en el vínculo desplegable.
Haga clic en Probar la demostración.

Aparece una nueva ventana con el espacio aislado de desarrollador para la API de incrustación de PDF.

Aquí puede ver las opciones para los diferentes modos de visualización.
Haga clic en los diferentes modos de visualización de Ventana completa, Contenedor de tamaño, En línea y Lightbox.
Haga clic en Ventana completa modo de visualización y, a continuación, Personalizar para activar y desactivar las opciones.
Desactivar Descargar opción de PDF.
Haga clic en Generar código para ver la vista previa del código.
Copiar ID de cliente desde la ventana Credenciales de Cliente de la Parte 1.
Abra el Web -> resources -> js -> dc-config.js en el editor de código.

Verá que la variable clientID está allí.
Pegue las credenciales de cliente entre comillas dobles para establecer el ID de cliente en sus credenciales.
Vuelva a la vista previa del código del espacio aislado del desarrollador.

Copie la segunda línea que tiene el script de Adobe:

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

Captura de pantalla del guion

Vaya al editor de código y abra el Web -> ejercitar -> index.html archivo.
Pegue el código de script en el <head> del archivo en la línea 18 bajo el comentario que dice: TODO: EJERCICIO 1: INSERTAR ETIQUETA DE SCRIPT DE API EMBED.

Vuelva a la vista previa del código del espacio aislado del desarrollador y copie la primera línea de código que tenga:

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

Captura de pantalla de dónde copiar el código

Vaya al editor de código y abra el Web -> ejercitar -> index.html archivo de nuevo.
Pegue el <div> código en el <body> del archivo en la línea 67 bajo el comentario que dice TODO: EJERCICIO 1: INSERTAR CÓDIGO DE API INCRUSTADA DE PDF.

Vuelva a la vista previa del código del espacio aislado del desarrollador y copie las líneas de código del <script> a continuación:

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>

Vaya al editor de código y abra el Web -> ejercitar -> index.html archivo de nuevo.
Pegue el <script> código en el <body> del expediente de la línea 68 en el marco del <div> etiqueta.
Modificar la línea 70 de la misma index.html para incluir la variable clientID creada anteriormente.
Modificar la línea 72 de la misma index.html para actualizar la ubicación del archivo de PDF y utilizar un archivo local.

Hay uno disponible en los archivos del tutorial en /resources/pdfs/whitepaper.pdf.
Guarde los archivos modificados y obtenga una vista previa del sitio web en <your domain>/summit21/web/exercise/.

Debería ver el informe técnico en modo de ventana completa en el navegador.

Parte 3: Acceso a las API de Analytics part3

Ahora que ha creado correctamente una página web que tiene la API de PDF Embed representando a un PDF, en la parte 3 puede explorar cómo utilizar eventos de JavaScript para medir análisis para comprender cómo los usuarios utilizan PDF.

Encontrar documentación

Hay una gran cantidad de eventos de JavaScript diferentes disponibles como parte de la API de PDF Embed. Puede acceder a ellos desde Adobe Acrobat Services documentación.

Vaya a la documentación sitio.
Revise los diferentes tipos de eventos disponibles como parte de la API. Estos son útiles como referencia y también serán útiles para sus futuros proyectos.

Copie el código de ejemplo que aparece en el sitio web.

Utilice esto como base para nuestro código y modifíquelo.

Captura de pantalla de dónde copiar el código de ejemplo

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

Busque la sección de código que agregó anteriormente que se parece a la siguiente y agregue el código anterior después de este código en index.html:
Cargue la página en el navegador web y abra la consola para ver las salidas de la consola de los diferentes eventos mientras interactúa con el visor del PDF.

Añadir modificador para capturar eventos

Ahora que los eventos se envían a console.log, cambiemos el comportamiento en función de los eventos. Para ello, utilizará un ejemplo de modificador.

Vaya a snippets/eventsSwitch.js y copie el contenido del archivo en el código del tutorial.
Pegue el código en la función de escucha de eventos.
Confirme que la consola obtiene una salida correcta cuando se carga la página e interactúa con el Visor del PDF.

Adobe Analytics

Si desea añadir la asistencia de Adobe Analytics a su visor, puede seguir las instrucciones que se indican en el sitio web.

IMPORTANT

Su página web ya debe tener Adobe Analytics cargado en la página del encabezado.

Vaya a la Documentación de Adobe Analytics y revise si ya tiene Adobe Analytics habilitado en su página web. Siga las instrucciones para configurar una ReportSuite.

Google Analytics

Captura de pantalla de cómo integrarse con los Google Analytics

La API Adobe PDF Embed proporciona una integración inmediata con Adobe Analytics. Sin embargo, dado que todos los eventos están disponibles como eventos de JavaScript, es posible realizar la integración con los Google Analytics capturando los eventos del PDF y utilizando la función ga() para añadir el evento a Adobe Analytics.

Vaya a snippets/eventsSwitchGA.js para ver cómo puedes integrarte con los Google Analytics.
Revise y utilice este código como ejemplo si su página web se rastrea con Adobe Analytics y ya está incrustada en la página web.

Parte 4: Añadir interactividad basada en eventos part4

En la parte 4, verás cómo colocar en la parte superior del visor del PDF un paywall que muestra después de desplazarte más allá de la segunda página.

Ejemplo de paywall

Vaya a esta ejemplo de un PDF detrás de un paywall. En este ejemplo, aprenderá a añadir interactividad sobre la experiencia de visualización del PDF.

Añadir código de paywall

Vaya a snippets/paywallCode.html y copie el contenido.
Buscar por  en exercise/index.html.
Pegue el código copiado después del comentario.
Vaya a snippets/paywallCode.js y copie el contenido.
Pegue el código en esa ubicación.

Probar una demostración con Paywall

Ahora puede ver la demostración.

Recargar index.html en su sitio web.
Desplácese hacia abajo hasta una página > 2.
Mostrar el cuadro de diálogo aparece para desafiar al usuario después de la segunda página.

Recursos adicionales

Se pueden encontrar recursos adicionales aquí.

recommendation-more-help

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