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

  • Recursos do tutorial baixar
  • Adobe ID obter 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. Acesse o menu Site do Adobe.io.

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

    Captura de tela do botão Saiba mais

    Isso leva você ao Adobe Acrobat Services página inicial.

  3. Clique em Começar na barra de navegação.

    Você verá uma opção em Comece a usar o produto Acrobat Services APIs até Criar novas credenciais ou Gerenciar credenciais existentes.

  4. Clique em Começar botão abaixo Criar novas credenciais.

    Captura de tela do botão Introdução

  5. Escolha o PDF Embed 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 das 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 acessar a documentação e obter 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. Baixar código de amostra aqui.

  1. Ir para Adobe Acrobat Services site.

    Captura de tela de Adobe Acrobat Services site

  2. Clique em APIs na barra de navegação, vá para a guia PDF Embed API no link suspenso.

    Captura de tela do menu suspenso PDF Embed API

  3. Clique em Experimente 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 Experimente 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 visualização

  5. Clique em Janela inteira modo de visualização e, em seguida, clique no botão Personalizar para ativar e desativar as opções.

    Captura de tela do botão Personalizar

  6. Desativar Baixar opção PDF.

  7. Clique em Gerar código para visualizar o código.

  8. Copiar ID do cliente na janela Credenciais de cliente da Parte 1.

    Captura de tela da ID do cliente

  9. Abra o Web -> resources -> 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. Acesse o editor de código e abra o Web -> exercício -> index.html arquivo.

  14. Cole o código de script no <head> do processo na linha 18 sob o comentário que diz: TODO: EXERCÍCIO 1: INSERIR TAG 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. Acesse o editor de código e abra o Web -> exercício -> index.html arquivo novamente.

  17. Cole o <div> código na <body> do processo na linha 67 sob o comentário que diz: TODO: EXERCÍCIO 1: INSERIR CÓDIGO DE API INCORPORADO DE PDF.

    Captura de tela do código onde colar

  18. Voltar para a visualização de código da sandbox do desenvolvedor e copiar 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. Acesse o editor de código e abra o Web -> exercício -> index.html arquivo novamente.

  20. Cole o <script> código na <body> do processo na linha 68 sob o <div> tag.

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

    Captura de tela da linha 70

  22. Modifique a linha 72 do mesmo index.html arquivo para atualizar o local do arquivo de PDF para usar um arquivo local.

    Há um guia disponível nos arquivos do tutorial em /resources/pdfs/whitepaper.pdf.

  23. Salve seus arquivos modificados e visualize seu site navegando até <your domain>/Summit21/web/activity/.

    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 em Adobe Acrobat Services documentação.

  1. Navegue até a guia documentação local.

  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 na index.html:

    Captura de tela do código onde colar

  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 do código onde colar

  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 guia Documentação do Adobe Analytics e revise se o Adobe Analytics já está ativado em 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 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 até 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. Procurar por <!-- 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. Ir para snippets/paywallCode.js e copie o conteúdo.

    Captura de tela do código onde colar

  5. Cole o código nesse local.

Experimente a demonstração com o Paywall

Agora você pode ver a demonstração.

  1. Recarregar 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 da demonstração

Recursos adicionais

Recursos adicionais podem ser encontrados aqui.

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