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

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

  1. Vá para o site Adobe.io.

  2. Clique em Saiba mais em Criar experiências de documento envolventes.

    Captura de tela do botão Saiba mais

    Você será direcionado para a home page do Adobe Acrobat Services.

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

  4. Clique no botão Introdução em Criar Novas Credenciais.

    Captura de tela do botão Introdução

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

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

  7. Clique em Exibir Documentação para ir para a documentação com informações detalhadas sobre como usar esta API.

    Captura de tela do botão Criar credenciais

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.

  1. Vá para o Adobe Acrobat Services site.

    Captura de tela do site Adobe Acrobat Services

  2. Clique em APIs na barra de navegação e vá para a página API de Incorporação de PDF no link suspenso.

    Captura de tela do menu suspenso Incorporar API do PDF

  3. Clique em Experimentar a demonstração.

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

    Captura de tela de Experimentar a demonstração

    Aqui você pode ver as opções para os diferentes modos de visualização.

  4. Clique nos diferentes modos de exibição para Janela inteira, Contêiner dimensionado, Em linha e Lightbox.

    Captura de tela dos modos de exibição

  5. Clique no modo de exibição Janela Completa e clique no botão Personalizar para ativar e desativar as opções.

    Captura de tela do botão Personalizar

  6. Desabilitar opção de PDF Download.

  7. Clique no botão Gerar código para ver a visualização do código.

  8. Copie a ID do Cliente da janela Credenciais do Cliente da Parte 1.

    Captura de tela da ID de cliente

  9. Abra o arquivo Web -> recursos -> js -> dc-config.js no editor de código.

    Você verá que a variável clientID está lá.

  10. Cole suas credenciais do cliente entre as aspas duplas para definir a clientID para sua credencial.

  11. Voltar para a visualização do código da sandbox do desenvolvedor.

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

  13. Vá para o editor de código e abra o arquivo Web -> exercício -> index.html.

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

    Captura de tela de onde colar o código de script

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

  16. Vá para o editor de código e abra novamente o arquivo Web -> exercício -> index.html.

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

    Captura de tela de onde colar o código

  18. 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
    <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. Vá para o editor de código e abra novamente o arquivo Web -> exercício -> index.html.

  20. Cole o código <script> no <body> do arquivo na linha 68 sob a marca <div>.

  21. Modifique a linha 70 do mesmo arquivo index.html para incluir a variável clientID criada anteriormente.

    Captura de tela da linha 70

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

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

  1. Navegue até o site de documentação.

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

    Captura de tela do guia de referência

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

    Captura de tela de onde colar o código

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

    Captura de tela do carregamento da página

    Captura de tela do código para carregar a página

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.

  1. Navegue até snippets/eventsSwitch.js e copie o conteúdo do arquivo no código do tutorial.

    Captura de tela de onde copiar o código

  2. Cole o código na função de ouvinte de eventos.

    Captura de tela de onde colar o código

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

  1. Navegue até snippets/eventsSwitchGA.js para ver como você pode integrar com Google Analytics.

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

    Captura de tela do código Adobe Analytics

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

  1. Acesse snippets/paywallCode.html e copie o conteúdo.

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

    Captura de tela de onde copiar o código

  3. Cole o código copiado após o comentário.

  4. Vá para snippets/paywallCode.js e copie o conteúdo.

    Captura de tela de onde colar o código

  5. Cole o código nesse local.

Experimente a demonstração com o Paywall

Agora você pode ver a demonstração.

  1. Recarregue index.html no seu site.

  2. Role para baixo até uma página > 2.

  3. Mostrar a caixa de diálogo que aparece para desafiar o usuário após a segunda página.

    Captura de tela de exibição da demonstração

Recursos adicionais

Recursos adicionais podem ser encontrados aqui.

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