Controle sua experiência online de PDF e reúna análises

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

Tópicos:

Criado para:

Intermediário
Desenvolvedor

Sua organização publica PDF em seu site? Saiba como usar a API incorporada do Adobe PDF para controlar a aparência, permitir a colaboração e coletar análises sobre como os usuários interagem com PDF, incluindo o tempo gasto em uma página e pesquisas. Para iniciar este tutorial prático de 4 partes, selecione Introdução à API incorporada do PDF.

Parte 1: Introdução à API de PDF incorporada

Parte 2: adição da API de PDF incorporada a uma página da Web

Parte 3: Acesso às APIs de Análise

Parte 4: adicionar interatividade com base em eventos

Parte 1: Introdução à API incorporada do PDF part1

Na parte 1, saiba como começar a usar tudo o que você precisa para as partes 1 e 3. Você começará obtendo credenciais de API.

Do que você precisa

baixar dos recursos do tutorial
Adobe ID obtenha um aqui
Servidor Web (Node JS, PHP, etc.)
Conhecimento prático de HTML / JavaScript / CSS

O que estamos usando

Um servidor Web básico (Nó)
Código do Visual Studio
GitHub

Obtendo credenciais

Vá para o site Adobe.io.
Clique em Saiba mais em Criar experiências de documento envolventes.

Você será direcionado para a home page do Adobe Acrobat Services.
Clique em Introdução na barra de navegação.

Você verá uma opção em Introdução a Acrobat Services APIs para Criar Novas Credenciais ou Gerenciar Credenciais Existentes.
Clique no botão Introdução em Criar Novas Credenciais.

PDF Escolha o botão de opção Incorporar API e adicione um nome de credencial de sua escolha e um domínio de aplicativo na próxima janela.

note note
NOTE
Essas credenciais só podem ser usadas no domínio do aplicativo listado aqui. Você pode usar qualquer domínio que escolher.

Captura de tela de credenciais

Clique em Criar Credenciais.

A página final do assistente fornece os detalhes da credencial do cliente. Deixe esta janela aberta para que você possa voltar a ela e copiar a ID do cliente (chave de API) para uso posterior.
Clique em Exibir Documentação para ir para a documentação com informações detalhadas sobre como usar esta API.

Parte 2: Adicionar a API de incorporação PDF a uma página da Web part2

Na parte 2, você aprenderá como incorporar facilmente a API de PDF em uma página da Web. Para fazer isso, use a demonstração online da API incorporada do Adobe PDF para criar nosso código.

Obter o código do exercício

Criamos código para você utilizar. Embora você possa usar seu próprio código, as demonstrações serão feitas no contexto dos recursos do tutorial. Baixe o código de exemplo aqui.

Vá para o Adobe Acrobat Services site.
Clique em APIs na barra de navegação e vá para a página API de Incorporação de PDF no link suspenso.
Clique em Experimentar a demonstração.

Uma nova janela é exibida com a caixa de proteção de desenvolvedor para a API de PDF incorporada.

Aqui você pode ver as opções para os diferentes modos de visualização.
Clique nos diferentes modos de exibição para Janela inteira, Contêiner dimensionado, Em linha e Lightbox.
Clique no modo de exibição Janela Completa e clique no botão Personalizar para ativar e desativar as opções.
Desabilitar opção de PDF Download.
Clique no botão Gerar código para ver a visualização do código.
Copie a ID do Cliente da janela Credenciais do Cliente da Parte 1.
Abra o arquivo Web -> recursos -> js -> dc-config.js no editor de código.

Você verá que a variável clientID está lá.
Cole suas credenciais do cliente entre as aspas duplas para definir a clientID para sua credencial.
Voltar para a visualização do código da sandbox do desenvolvedor.

Copie a segunda linha que tem o script Adobe:

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

Captura de tela do script

Vá para o editor de código e abra o arquivo Web -> exercício -> index.html.
Cole o código de script na <head> do arquivo na linha 18 sob o comentário que diz: TODO: EXERCÍCIO 1: INSERIR MARCA DE SCRIPT DE API INCORPORADA.

Volte para a visualização do código da sandbox do desenvolvedor e copie a primeira linha de código que:

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

Captura de tela de onde copiar o código

Vá para o editor de código e abra novamente o arquivo Web -> exercício -> index.html.
Cole o código <div> no <body> do arquivo na linha 67 sob o comentário que diz TODO: EXERCISE 1: INSERT PDF EMBED API CODE.

Volte para a visualização do código da sandbox do desenvolvedor e copie as linhas de código da <script> abaixo:

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>

Vá para o editor de código e abra novamente o arquivo Web -> exercício -> index.html.
Cole o código <script> no <body> do arquivo na linha 68 sob a marca <div>.
Modifique a linha 70 do mesmo arquivo index.html para incluir a variável clientID criada anteriormente.
Modifique a linha 72 do mesmo arquivo index.html para atualizar o local do arquivo de PDF para usar um arquivo local.

Há um disponível nos arquivos do tutorial em /resources/pdfs/whitepaper.pdf.
Salve os arquivos modificados e visualize seu site navegando até <your domain>/Summit21/web/exercício/.

Você deverá ver o white paper técnico renderizar em modo de janela inteira no navegador.

Parte 3: Acesso às APIs do Analytics part3

Agora que você criou com sucesso uma página da Web que tem a API de PDF incorporado renderizando um PDF, na parte 3, agora você pode explorar como usar eventos JavaScript para medir a análise e entender como os usuários estão usando PDF.

Encontrar documentação

Há vários eventos JavaScript diferentes disponíveis como parte da API de incorporação de PDF. Você pode acessá-los na documentação do Adobe Acrobat Services.

Navegue até o site de documentação.
Revise os diferentes tipos de evento disponíveis como parte da API. Eles são úteis para referência e também serão úteis para seus futuros projetos.

Copie o código de exemplo listado no site.

Use isso como base para nosso código e modifique-o.

Captura de tela de onde copiar o código de amostra

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

Localize a seção de código adicionada anteriormente que se parece com a abaixo e anexe o código acima após este código em index.html:
Carregue a página no navegador da Web e abra o Console para exibir as saídas do console dos diferentes eventos enquanto interage com o visualizador de PDF.

Adicionar opção para capturar eventos

Agora que os eventos estão sendo exportados para console.log, vamos alterar o comportamento com base em quais eventos. Para fazer isso, use um exemplo de switch.

Navegue até snippets/eventsSwitch.js e copie o conteúdo do arquivo no código do tutorial.
Cole o código na função de ouvinte de eventos.
Confirme se a saída do console ocorre corretamente quando a página é carregada e se você interage com o Visualizador de PDF.

Adobe Analytics

Para adicionar suporte do Adobe Analytics ao visualizador, siga as instruções documentadas no site.

IMPORTANT

Sua página da Web já precisa ter o Adobe Analytics carregado na página no cabeçalho.

Navegue até a documentação do Adobe Analytics e revise se você já tem o Adobe Analytics habilitado na sua página da Web. Siga as instruções para configurar um conjunto de relatórios.

Google Analytics

Captura de tela de como integrar com Google Analytics

A API incorporada do Adobe PDF fornece integração imediata com o Adobe Analytics. No entanto, como todos os eventos estão disponíveis como eventos JavaScript, é possível integrar com Google Analytics capturando eventos PDF e usando a função ga() para adicionar o evento ao Adobe Analytics.

Navegue até snippets/eventsSwitchGA.js para ver como você pode integrar com Google Analytics.
Revise e use esse código como exemplo se a página da Web for rastreada usando o Adobe Analytics e já estiver incorporada à página da Web.

Parte 4: Adicionar interatividade com base em eventos part4

Na parte 4, você explicará como colocar em camadas no topo do visualizador de PDF um paywall que é exibido quando você passa pela segunda página.

Exemplo do Paywall

Navegue para este exemplo de um PDF atrás de um paywall. Neste exemplo, você aprenderá a adicionar interatividade sobre uma experiência de visualização de PDF.

Adicionar código de paywall

Acesse snippets/paywallCode.html e copie o conteúdo.
Pesquise  em exercise/index.html.
Cole o código copiado após o comentário.
Vá para snippets/paywallCode.js e copie o conteúdo.
Cole o código nesse local.

Experimente a demonstração com o Paywall

Agora você pode ver a demonstração.

Recarregue index.html no seu site.
Role para baixo até uma página > 2.
Mostrar a caixa de diálogo que aparece para desafiar o usuário após a segunda página.

Recursos adicionais

Recursos adicionais podem ser encontrados aqui.

recommendation-more-help

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