Show Menu
화제×

Facebook 인스턴트 아티클로 구현

Facebook 인스턴트 아티클을 사용하면 발행자는 Facebook에서 빠르고 인터랙티브한 아티클을 만들 수 있습니다. 인스턴트 아티클은 모바일 웹보다 최고 10배 더 빠르게 컨텐츠를 로드할 수 있습니다.
Facebook 인스턴트 아티클에 Adobe Analytics를 포함하여 방문자 행동을 추적할 수 있습니다. 게시자 컨텐츠는 게시자의 웹 사이트가 아닌 Facebook 앱 내에 있으므로, 태그 지정 방식은 표준 Analytics 구현과 약간 다릅니다.

워크플로우

Adobe Analytics를 구현하는 주요 워크플로우는 다음과 같습니다.
  1. 페이지를 stats.html 만듭니다. 이 페이지를 코딩하여 URL에서 쿼리 문자열 매개 변수를 가져오고 각 매개 변수를 Analytics 변수에 지정합니다
  2. 웹 서버에서 stats.html 페이지 호스팅
  3. iframe의 stats.html 파일을 참조하여 Facebook Instant Article에 Analytics 구현
  4. iframe 속성에 쿼리 문자열 매개 변수 src 포함

1단계:페이지 stats.html 만들기

아래의 샘플 HTML을 사용하여 인스턴트 문서에서 통계를 캡처할 수 있습니다. 이 파일은 일반적으로 회사 웹 서버 중 하나에서 호스트됩니다. 인스턴트 아티클이 로드될 때마다 iframe에 파일이 로드되어 Adobe로 데이터를 보냅니다.
<html>
  <head>
    <title>Facebook Stats</title>
      <script language="javaScript" type="text/javascript" src="VisitorAPI.js"></script>
      <script language="javaScript" type="text/javascript" src="AppMeasurement.js"></script>
  </head>
  <body>
    <script>
      var v_orgId = "INSERT-ORG-ID-HERE";
      var s_account = "examplersid";
      var s_trackingServer = "example.sc.omtrdc.net";
      var visitor = Visitor.getInstance(v_orgId);
      visitor.trackingServer = s_trackingServer;

      var s = s_gi(s_account);
      s.account = s_account;
      s.trackingServer = s_trackingServer;
      s.visitor = visitor;

      s.pageName = s.Util.getQueryParam("pageName");
      s.pageURL = document.referrer; // The referrer to the utility page is the parent frame
      s.campaign = s.Util.getQueryParam("cmpId");
      s.eVar1 = "Facebook Instant Article";
      s.eVar2 = s.Util.getQueryParam("eVar2");

      s.t();
    </script>
  </body>
</html>

2단계:웹 서버에서 stats.html 페이지 호스팅

Adobe는 최신 버전의 및 와 함께 stats.html 페이지를 호스팅할 것을 AppMeasurement.js 권장합니다 VisitorAPI.js . 조직의 해당 엔지니어링 팀과 협력하여 이 파일을 올바른 위치에 호스팅합니다.

3단계:각 Facebook stats.html 인스턴트 아티클 페이지에 대한 참조

Facebook 인스턴트 아티클 콘텐츠를 만들 때 iframe 내에 분석 HTML 콘텐츠를 포함하십시오. 예:
<iframe class="no-margin" src="https://example.com/stats.html" height="0"></iframe>

4단계:사용자 지정 변수 및 이벤트 추적 설정

사용자 지정 변수 및 이벤트는 두 가지 서로 다른 접근 방식을 통해 분석 HTML 내에서 추적할 수 있습니다.
  • 변수 값과 이벤트를 stats.html 페이지에 직접 포함합니다. 여기에서 정의된 변수는 모든 Facebook 인스턴트 아티클에 대해 일반적으로 동일한 값에 가장 적합합니다.
  • iframe을 참조하는 쿼리 문자열의 일부로 변수 값을 포함합니다. 이 방법을 사용하면 Facebook 인스턴트 아티클에서 Analytics 코드를 호스팅하는 iframe으로 변수 값을 전송할 수 있습니다.
다음 예는 쿼리 문자열에 포함된 여러 사용자 지정 변수를 보여줍니다. 그런 다음 JavaScript stats.html 가 다음을 사용하여 쿼리 문자열을 확인합니다 s.Util.getQueryParam() .
<iframe class="no-margin" src="https://example.com/stats.html?eVar2=Dynamic%20article%20title&pageName=Example%20article%20name&cmpId=exampleID123" height="0"></iframe>

Referrer 차원은 iframe의 특성으로 인해 자동으로 추적되지 않습니다. 추적하려는 경우 이 차원을 쿼리 문자열의 일부로 포함해야 합니다.

Facebook 인스턴트 아티클 및 개인 정보

Analytics HTML 페이지가 웹 서버에 호스팅되는 한 Adobe는 모든 Facebook Instant Articles에서 기존 개인 정보 보호 정책을 지원합니다. 사용자가 기본 사이트에서 추적을 옵트아웃하는 경우, 모든 Facebook 인스턴트 아티클에 대한 추적도 옵트아웃합니다. 또한 유틸리티 페이지는 Facebook Instant Article 데이터를 Experience Cloud의 나머지 데이터와 통합할 수 있도록 Adobe Experience Cloud Identity Service를 지원합니다.