플리커 관리

Last update: Tue Jul 16 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

주제:

작성 대상:

개발자

개인화 콘텐츠를 렌더링할 때 SDK에서 깜박임이 없는지 확인해야 합니다. FOOC(원본 컨텐츠 Flash)라고도 하는 플리커는 테스트/개인화 중에 대체 컨텐츠가 나타나기 전에 원본 컨텐츠가 잠깐 나타나는 것입니다. SDK는 페이지의 요소에 CSS 스타일을 적용하여 개인화 콘텐츠가 성공적으로 렌더링될 때까지 해당 요소를 숨기도록 합니다.

깜박임을 관리하는 방법은 웹 SDK를 동기식으로 배포하는지 아니면 비동기식으로 배포하는지에 따라 다릅니다. alloy.js을(를) 배포한 <head> 태그 또는 태그 로더를 확인합니다. <script> 태그에 async 특성이 있으면 웹 SDK가 비동기적으로 로드되는지 여부가 결정됩니다.

<!-- This tag loads synchronously -->
<script src="https://assets.adobedtm.com/[...]/launch-example.min.js"></script>

<!-- This tag loads asynchronously -->
<script src="https://assets.adobedtm.com/[...]/launch-example.min.js" async></script>

<!-- This library loads synchronously -->
<script src="https://cdn1.adoberesources.net/alloy/2.14.0/alloy.min.js"></script>

<!-- This library loads asynchronously -->
<script src="https://cdn1.adoberesources.net/alloy/2.14.0/alloy.min.js" async></script>

동기식 배포를 위한 플리커 관리

동기식 플리커 관리는 다음 세 단계로 구분됩니다.

사전 숨김
전처리
렌더링

사전 숨김 단계 동안 SDK는 prehidingStyle 구성 속성을 사용하여 HTML 스타일 태그를 만들고 DOM에 추가하여 페이지의 원하는 섹션이 숨겨지도록 합니다. 개인화할 페이지의 부분을 잘 모를 경우 prehidingStyle을(를) body { opacity: 0 !important }(으)로 설정하는 것이 좋습니다. 이렇게 하면 전체 페이지가 숨겨집니다. 그러나 Lighthouse, 웹 페이지 테스트 등의 도구에서 보고하는 페이지 렌더링 성능이 더 나빠지는 단점이 있습니다. 최상의 페이지 렌더링 성능을 위해서는 prehidingStyle을(를) 개인화할 페이지의 부분을 포함하는 컨테이너 요소 목록으로 설정하는 것이 좋습니다.

아래 페이지와 같은 HTML 페이지가 있고 bar 및 bazz 컨테이너 요소만 개인화된다고 가정합니다.

<html>
  <head>
  </head>
  <body>
    <div id="foo">
      Foo foo foo
    </div>

    <div id="bar">
      Bar bar bar
    </div>

    <div id="bazz">
      Bazz bazz bazz
    </div>
  </body>
</html>

prehidingStyle을(를) #bar, #bazz { opacity: 0 !important }(으)로 설정해야 합니다.

SDK가 서버로부터 개인화된 콘텐츠를 수신하면 전처리 단계 가 시작됩니다. 이 단계에서는 응답을 전처리하여 개인화된 콘텐츠를 포함해야 하는 요소를 숨깁니다. 이러한 요소가 숨겨지면 prehidingStyle 구성 옵션을 기반으로 만들어진 HTML 스타일 태그가 제거되고 HTML 본문이나 숨겨진 컨테이너 요소가 표시됩니다.

모든 개인화 콘텐츠가 성공적으로 렌더링되거나 오류가 있는 경우 렌더링 단계 가 시작됩니다. 이전에 숨겨진 모든 요소는 SDK에 의해 숨겨진 숨겨진 요소가 페이지에 없는지 확인하기 위해 표시됩니다.

비동기 배포를 위한 플리커 관리

항상 SDK를 비동기식으로 로드하여 최상의 페이지 렌더링 성능을 얻는 것이 좋습니다. 그러나 이는 개인화된 콘텐츠의 렌더링에 몇 가지 영향을 미칩니다. SDK가 비동기적으로 로드되면 코드 조각 사전 숨김을 사용해야 합니다. 코드 조각 사전 숨김은 HTML 페이지에서 SDK 앞에 추가해야 합니다. 다음은 전체 본문을 숨기는 예제 코드 조각입니다.

<script>
  !function(e,a,n,t){
    if (a) return;
    var i=e.head;if(i){
    var o=e.createElement("style");
    o.id="alloy-prehiding",o.innerText=n,i.appendChild(o),
    setTimeout(function(){o.parentNode&&o.parentNode.removeChild(o)},t)}}
    (document, document.location.href.indexOf("adobe_authoring_enabled") !== -1, "body { opacity: 0 !important }", 3000);
</script>

HTML 본문 또는 컨테이너 요소가 장기간 숨겨지지 않도록 하기 위해 코드 조각 사전 숨김은 기본적으로 3000밀리초 후에 코드 조각을 제거하는 타이머를 사용합니다. 3000밀리초가 최대 대기 시간입니다. 서버의 응답을 더 빨리 받고 처리한 경우 HTML 스타일 사전 숨김 태그가 가능한 한 빨리 제거됩니다.

recommendation-more-help

ad108910-6329-42f1-aa1d-5920a2b13636