온라인 PDF 경험 제어 및 분석 수집

귀사에서 웹 사이트에 PDF을 게시합니까? Adobe PDF 임베드 API를 사용하여 모양을 제어하고, 공동 작업을 활성화하고, PDF 및 검색에 소요되는 시간을 포함하여 사용자가 사용자와 상호 작용하는 방식에 대한 분석을 수집하는 방법을 살펴보십시오. 이 4부로 구성된 실습 튜토리얼을 시작하려면 PDF 포함 API 시작하기.

1부: PDF 포함 API 시작하기 part1

1부에서는 1-3부에 필요한 모든 것을 시작하는 방법을 알아봅니다. API 자격 증명을 가져오는 것으로 시작합니다.

필요한 기능

사용 중인 콘텐츠

  • 기본 웹 서버(노드)
  • Visual Studio 코드
  • GitHub

자격 증명을 가져오는 중

  1. 다음으로 이동 Adobe.io 웹 사이트.

  2. 클릭 자세한 내용 를 참조하십시오.

    자세히 알아보기 버튼의 스크린샷

    그러면 Adobe Acrobat Services 홈 페이지

  3. 클릭 시작하기 를 클릭합니다.

    옵션 시작하기 Acrobat Services API새 자격 증명 만들기 또는 기존 자격 증명 관리.

  4. 클릭 시작하기 단추 아래쪽 새 자격 증명 만들기.

    시작하기 버튼 스크린샷

  5. 원하는 PDF 포함 API 라디오 버튼을 클릭하고 다음 창에서 선택한 자격 증명 이름과 응용 프로그램 도메인을 추가합니다.

    note note
    NOTE
    이러한 자격 증명은 여기에 나열된 응용 프로그램 도메인에서만 사용할 수 있습니다. 원하는 도메인을 사용할 수 있습니다.

    자격 증명 스크린샷

  6. 클릭 자격 증명 만들기.

    마법사의 마지막 페이지에 클라이언트 자격 증명 세부 정보가 표시됩니다. 나중에 다시 사용할 수 있도록 이 창을 열어 두고 클라이언트 ID(API 키)를 복사합니다.

  7. 클릭 설명서 보기 이 API를 사용하는 방법에 대한 자세한 정보가 있는 설명서로 이동합니다.

    자격 증명 만들기 단추의 스크린샷

2부: 웹 페이지에 PDF 포함 API 추가 part2

2부에서는 PDF 포함 API를 웹 페이지에 쉽게 포함하는 방법을 알아봅니다. Adobe PDF Embed API 온라인 데모를 사용하여 코드를 만들면 됩니다.

연습 코드 받기

사용할 코드를 만들었습니다. 사용자 고유의 코드를 사용할 수 있지만 데모는 자습서 리소스의 컨텍스트에 있습니다. 샘플 코드 다운로드 여기.

  1. 이동 Adobe Acrobat Services 웹 사이트.

    스크린샷 Adobe Acrobat Services 웹 사이트

  2. 클릭 API 내비게이션 막대에서 PDF 포함 API 페이지를 클릭합니다.

    PDF 포함 API 드롭다운 스크린샷

  3. 클릭 데모 사용해 보기.

    PDF 포함 API에 대한 개발자 샌드박스가 있는 새 창이 표시됩니다.

    데모 스크린샷

    여기에서 다양한 보기 모드에 대한 옵션을 확인할 수 있습니다.

  4. [전체 창], [크기 컨테이너], [인라인] 및 [라이트박스]에 대해 다른 보기 모드를 클릭합니다.

    보기 모드의 스크린샷

  5. 클릭 전체 창 보기 모드, 사용자 정의 옵션을 켜거나 끄는 버튼.

    사용자 정의 단추 스크린샷

  6. 사용 안 함 다운로드 PDF 옵션.

  7. 클릭 코드 생성 버튼을 클릭하여 코드 미리 보기를 확인합니다.

  8. 복사 클라이언트 ID 1부의 클라이언트 자격 증명 창에서

    클라이언트 ID 스크린샷

  9. 열기 -> 리소스 -> js -> dc-config.js 파일 이름을 입력합니다.

    clientID 변수가 표시됩니다.

  10. 클라이언트 자격 증명을 큰따옴표 사이에 붙여넣어 클라이언트 ID를 자격 증명으로 설정합니다.

  11. 개발자 샌드박스 코드 미리 보기로 돌아갑니다.

  12. Adobe 스크립트가 있는 두 번째 행을 복사합니다.

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

    스크립트 스크린샷

  13. 코드 편집기로 이동하여 -> 운동 -> index.html 있습니다.

  14. 스크립트 코드를 <head> 18행의 파일에 다음 내용이 포함되어 있습니다. TODO: 연습 1: EMBED API 스크립트 태그 삽입.

    스크립트 코드를 붙여넣을 위치의 스크린샷

  15. 개발자 샌드박스 코드 미리 보기로 돌아가서 다음과 같은 코드의 첫 번째 행을 복사합니다.

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

    코드 복사 위치 스크린샷

  16. 코드 편집기로 이동하여 -> 운동 -> index.html 파일을 다시 엽니다.

  17. 붙여넣기 <div> 코드를 <body> 67번 줄에서 TODO: 연습 1: PDF 포함 API 코드 삽입.

    코드를 붙여넣을 위치의 스크린샷

  18. 개발자 샌드박스 코드 미리 보기로 돌아가서 <script> 아래:

    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. 코드 편집기로 이동하여 -> 운동 -> index.html 파일을 다시 엽니다.

  20. 붙여넣기 <script> 코드를 <body> 파일 이름을 입력합니다. <div> 태그의 평균 높이를 사용합니다.

  21. 같은 70번 줄 수정 index.html 파일에 앞서 만든 clientID 변수가 포함됩니다.

    70행의 스크린샷

  22. 같은 72행 수정 index.html 로컬 파일을 사용하도록 PDF 파일의 위치를 업데이트하는 파일입니다.

    의 자습서 파일에 사용 가능한 파일이 있습니다. /resources/pdfs/whitepaper.pdf.

  23. 수정된 파일을 저장하고 웹 사이트에서 <your domain>/summit21/web/exercise/.

    브라우저 내에서 기술 백서 렌더링이 전체 창 모드로 표시됩니다.

파트 3: Analytics API 액세스 part3

PDF을 렌더링하는 PDF 포함 API가 포함된 웹 페이지를 만들었으므로 이제 3부에서 JavaScript PDF을 사용하여 분석을 측정하고 사용자가 분석을 사용하는 방식을 이해하는 방법을 살펴볼 수 있습니다.

설명서 찾기

PDF 포함 API의 일부로 사용할 수 있는 다양한 JavaScript 이벤트가 있습니다. 다음에서 액세스할 수 있습니다. Adobe Acrobat Services 참조하십시오.

  1. 다음 위치로 이동합니다. 설명서 사이트로 이동합니다.

  2. API의 일부로 사용할 수 있는 다양한 이벤트 유형을 검토합니다. 참조용으로 유용하며 향후 프로젝트에도 도움이 됩니다.

    참조 안내서의 스크린샷

  3. 웹 사이트에 나열된 샘플 코드를 복사합니다.

    이를 코드의 기초로 사용하고 수정합니다.

    샘플 코드를 복사할 위치의 스크린샷

    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. 앞서 추가한 코드 섹션을 아래와 같이 찾아 이 코드 다음에 위 코드를 추가합니다. index.html:

    코드를 붙여넣을 위치의 스크린샷

  5. 웹 브라우저에서 페이지를 로드하고 콘솔을 열어 PDF 뷰어와 상호 작용할 때 다른 이벤트의 콘솔 출력을 봅니다.

    페이지 로드 스크린샷

    페이지 로드 코드의 스크린샷

이벤트 캡처를 위한 스위치 추가

이제 console.log에 출력되는 이벤트가 있으므로 이벤트를 기준으로 동작을 변경해 보겠습니다. 이 작업을 수행하려면 switch 예제를 사용합니다.

  1. 다음으로 이동 snippets/eventsSwitch.js 파일의 내용을 자습서 코드에 복사합니다.

    코드 복사 위치 스크린샷

  2. 이벤트 리스너 함수에 코드를 붙여넣습니다.

    코드를 붙여넣을 위치의 스크린샷

  3. 페이지가 로드되고 PDF 뷰어와 상호 작용할 때 콘솔이 올바르게 출력되는지 확인합니다.

Adobe Analytics

뷰어에 Adobe Analytics 지원을 추가하려는 경우 웹 사이트에 설명된 지침을 따를 수 있습니다.

IMPORTANT
웹 페이지에는 이미 Adobe Analytics이 머리글의 페이지에 로드되어 있어야 합니다.

다음 위치로 이동합니다. Adobe Analytics 설명서 웹 페이지에서 Adobe Analytics이 활성화되어 있는지 확인합니다. 지침에 따라 reportSuite를 설정합니다.

Google Analytics

Google Analytics과 통합하는 방법의 스크린샷

Adobe PDF 임베드 API는 Adobe Analytics과 바로 통합됩니다. 그러나 모든 이벤트는 JavaScript 이벤트로 사용할 수 있으므로 PDF 이벤트를 캡처하고 ga() 함수를 사용하여 Adobe Analytics에 이벤트를 추가함으로써 Google Analytics과 통합할 수 있습니다.

  1. 다음으로 이동 snippets/eventsSwitchGA.js Google Analytics과 통합하는 방법을 살펴보십시오.

  2. 웹 페이지가 Adobe Analytics을 사용하여 추적되고 웹 페이지에 이미 포함되어 있는 경우 이 코드를 검토하여 예로 사용하십시오.

    Adobe Analytics 코드 스크린샷

4부: 이벤트를 기반으로 인터랙티브 요소 추가 part4

4부에서는 PDF 뷰어 위에 두 번째 페이지를 지나 스크롤한 후 표시되는 페이월을 겹치는 방법을 살펴봅니다.

페이월 예제

이 페이지로 이동 페이월 뒤에 있는 PDF 예. 이 예제에서는 PDF 보기 환경 위에 인터랙티브한 요소를 추가하는 방법을 살펴보겠습니다.

페이월 코드 추가

  1. snippets/paywallCode.html으로 이동하여 내용을 복사합니다.

  2. 검색 대상 <!-- TODO: EXERCISE 3: INSERT PAYWALL CODE --> exercise/index.html에 있습니다.

    코드 복사 위치 스크린샷

  3. 복사한 코드를 주석 뒤에 붙여넣습니다.

  4. 이동 snippets/paywallCode.js 내용을 복사합니다.

    코드를 붙여넣을 위치의 스크린샷

  5. 코드를 해당 위치에 붙여넣습니다.

Paywall을 사용하여 데모 시도

이제 데모를 볼 수 있습니다.

  1. 다시 로드 index.html 참조하십시오.

  2. 2보다 큰 페이지로 스크롤합니다.

  3. 두 번째 페이지 다음에 사용자에게 메시지를 표시하는 대화 상자를 표시합니다.

    데모 보기 스크린샷

추가 리소스

추가 리소스를 찾을 수 있습니다. 여기.

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