설명서TargetTarget 안내서

시각적 경험 작성기 모범 사례 및 제한 사항

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 주제:

다음 우수 사례는 경험이 예상대로 작동하도록 하는 데 도움이 될 수 있습니다. Adobe Target에서 VEC(시각적 경험 작성기)를 사용할 때 알고 있어야 하는 다른 팁과 제한 사항도 있습니다.

이 우수 사례를 따르면 디자인하는 경험에 예기치 않은 문제점이 발생할 가능성이 줄어듭니다.

우수 사례 section_86CF28C99CFF40329E4CBAFE4DD78BB4

at.js 참조를 페이지의 <head> 섹션 맨 위에 놓습니다.

방문자 API 서비스를 사용하는 경우 at.js 위에 방문자 API 스크립트를 배치하십시오.

계정 수준(계정에서 만들어진 모든 활동에 대해 활성화됨)이나 개별 활동 수준에서 향상된 경험 작성기를 활성화할 수 있습니다.

계정 수준에서 향상된 경험 작성기를 활성화하려면 Administration > Visual Experience Composer을(를) 클릭한 다음, 스위치를 [켜짐] 위치로 전환하십시오.

시각적 경험 작성기에서 활동을 만드는 동안 활동 수준에서 향상된 경험 작성기를 활성화하려면 Configure > URL을(를) 클릭한 다음, 스위치를 [켜짐] 위치로 전환하십시오.

허용 목록에 추가하다 Enhanced Visual Experience Composer가 사이트의 보안 페이지에서 로드되지 않는 경우 특정 IP 주소를 검색할 수 있습니다.

다음 IP 주소를 허용 목록에 추가 하여 향상된 시각적 경험 작성기를 로드하는 동안 문제가 해결될 수 있습니다. 이 IP 주소는 향상된 경험 작성기 프록시에 사용되는 Adobe의 서버용이며, 활동 편집에만 필요합니다. 사이트 방문자는 이러한 IP 주소를 허용 목록에추가된으로 사용할 필요가 없습니다.

미국: 52.55.99.45, 54.80.158.92 및 54.204.197.253

유럽, 중동 및 아프리카(EMEA): 52.51.238.221, 52.210.199.44 및 54.72.56.50

아시아 태평양(APAC): 52.193.67.35, 54.199.198.109 및 54.199.241.57

최상위 레벨 요소 및 올바른 테스트/타깃팅 후보일 수 있는 기타 요소에 고유 ID를 사용하십시오.

본문 요소 내부의 모든 항목은 고유 ID가 있어야 합니다. 새 요소가 본문에 삽입되고 코드가 배치되면 적어도 상위 요소는 더 쉽게 인식할 수 있는 방법이 있습니다.

Adobe Target에는 ID가 필요하지 않지만 ID를 사용하면 경험 작성기를 사용하여 작성된 경험의 안정성이 증가합니다. Target에서는 경험이 전달될 때 CSS 선택기를 사용하여 컨텐츠를 수정합니다. 경험을 편집할 때 시각적 경험 작성기는 수정할 HTML 요소에 가장 가깝고 널이 아닌 ID 속성을 가진 상위 항목에 선택기를 앵커로 설정합니다. 따라서 HTML ID 속성을 설정하거나 수정하는 JavaScript 라이브러리를 포함한 어떤 메커니즘도 사용하지 않는 것이 좋습니다. 활동 작성을 위한 Target 경험 작성기에서 이러한 ID를 사용할 수는 있지만, JavaScript가 ID를 수정하는 경우 경험을 만들 때 사용된 ID는 경험을 실행할 때 사용할 수 없습니다. ID를 사용할 수 없는 경우에는 ID에 앵커로 설정된 선택기가 실패합니다.

쉽게 식별할 수 있도록 CSS 클래스의 이름을 지정합니다.

시각적 경험 작성기에서 CSS 클래스를 편집할 때 수사적 클래스 이름을 사용하여 클래스를 식별하기 쉽게 하면 유용합니다. 이렇게 하는 것은 올바른 CSS 클래스를 편집하고 페이지가 예상대로 표시되도록 하는 데 도움이 됩니다.

요소를 숨기거나 제거할 때 !important CSS 속성을 사용하지 마십시오.

1!important1 CSS 속성이 있으면 전달 중 target.js에 의해 변경된 사항이 사이트의 CSS 규칙으로 인해 무시됩니다.

페이지 레이아웃에 HTML 표를 사용하지 마십시오.

Target Standard 및 Premium은 JavaScript를 사용하여 페이지에 형식을 지정하는데, JavaScript로는 표 기반 레이아웃을 수정하기 어렵습니다. 또한 표 기반 레이아웃은 모든 브라우저에서 동일하게 표시되지 않을 수도 있습니다. 최상의 결과를 얻으려면 CSS를 사용하여 페이지 레이아웃을 작성하십시오.

iFrame의 사용을 최소화하십시오.

페이지 및 테스트 관리를 단순화하기 위해서는 iFrame의 사용을 최소화하는 것이 좋습니다. 시각적 경험 작성기는 iFrame 내에서 일부 작업을 적용할 수 있지만 크기 조정과 같은 일부 작업은 제대로 작동하지 않습니다. 여러 iFrame을 사용하는 페이지를 관리하고 페이지 크기를 조정하는 것은 어렵습니다. 따라서 iFrame을 많이 사용하는 페이지를 테스트하면 문제가 발생할 수 있습니다.

DOM이 준비된 후 가능한 한 빨리 모든 동적 DOM 수정 사항을 적용할 수 있도록 하십시오.

target.js에 의한 경험 적용 전에 수정 사항이 적용되지 않으면, 컨텐츠 전달이 중단될 수 있습니다. 이런 일은 타깃팅된 요소의 계층 구조에 DOM 변경 사항이 있는 경우에만 발생합니다.

앵커 요소에서는 일반 텍스트나 이미지 태그만 사용하십시오.

<a>Anchor Text</a>

또는

<a href=""> <img src=""> </img> </a>

인라인 요소 내부에는 블록 수준 요소를 사용하지 마십시오.

블록 수준 요소는 앵커, span 등과 같은 인라인 요소에서 사용해서는 안 됩니다. 이렇게 하면 인라인 요소가 높이와 너비를 잃을 수 있으므로 시각적 경험 작성기의 오버레이 도구가 예상대로 작동하지 않을 수 있습니다.

웹 사이트에서 base 태그를 사용하여 URL 및 링크를 확인하지 마십시오.

시각적 경험 작성기는 링크를 업데이트한 프록시 서버를 사용하여 막후에서 웹 사이트를 조작합니다. base 태그를 추가하는 경우, 프록시 서버에서 사용하는 URL은 브라우저에서 다시 확인되어 깨진 것처럼 표시됩니다.

EDIT HTML을 사용하여 DOM 구조를 조작하면 선택기가 손상될 수 있습니다.

예를 들어, 다음 두 작업을 수행한 경우,

  • 요소 1에 클래스 추가
  • 요소 1에 대한 HTML 편집

각 변경 사항은 시각적 경험 작성기에서 새 요소를 만듭니다. 두 번째 작업은 요소 1을 수정하므로, 요소 1을 삭제하면 두 번째 작업에서는 더 이상 수정할 사항이 없게 되며, 따라서 변경이 더 이상 작동하지 않습니다.

다시 말해, 텍스트가 있는 요소를 추가하면, 다른 텍스트로 해당 요소를 편집하는 별도의 작업에서 코드 편집기에 두 작업이 모두 별도의 요소로 표시됩니다. 요소를 편집한 경우 편집된 텍스트를 포함하고 여러분이 만든 원본을 수정하는 새 요소가 만들어진 것입니다. 만약 원래 요소를 삭제하면 편집된 텍스트는 편집된 요소를 찾을 수 없으며 표시되지 않습니다. 두 번째 요소는 요소 목록에는 남아 있지만, 변경되는 요소가 더 이상 존재하지 않으므로 이 요소는 페이지에 영향을 주지 않습니다.

시각적 경험 작성기에 사용된 요소 선택기를 참조하십시오.

리치 텍스트 편집기를 사용하여 텍스트 요소에 스타일을 지정할 때 <b> 및 <i> 태그를 사용하십시오.

  • 굵은 텍스트를 표시하려면 <strong>보다는 <b>를 사용하십시오.
  • 기울임체 텍스트를 표시하려면 <em>보다는 <i>를 사용하십시오.

<strong>과 <em> 태그는 예상치 못한 결과를 초래할 수 있습니다.

양식 필드를 제거할 때 주의하십시오.

특정 양식 필드는 제출을 위한 필수 사항일 수 있으며, 따라서 해당 양식 필드를 제거하면 제출에 영향을 줄 수 있습니다.

스크립트 내에 mboxCreate을 포함하지 마십시오.

mboxCreate은 document.write을 사용하므로 스크립트에 mboxCreate을 포함하지 않는 것이 좋습니다. 대신, mboxDefine 및 mboxUpdate를 동일한 목적에 사용하십시오.

초기화에 JavaScript 코드가 필요한 경우 Target Standard를 사용하여 html 코드 조각을 업데이트하지 마십시오.

작업(HTML 편집)이 페이지 조각(슬라이더, 회전 메뉴 등)에서 수행되면 전달이 깨진 것으로 표시될 수 있습니다. 시각적 경험 작성기는 페이지 조각을 JavaScript로 인스턴스화한 후 작업을 수행합니다.

그러나 페이지의 컨텐츠가 방문자에게 전달되면 조각 인스턴스화 전에 작업이 적용됩니다. 이 때문에 이 조각의 기능은 전달 시 깨질 수도 있고 깨지지 않을 수도 있습니다. 기능은 조각을 정의하기 위해 페이지에서 사용되는 스크립트의 특성에 따라 다릅니다.

전달 테스트를 수행하고 있고 이 전달이 처음 작동되는 경우라면 계속 작동하리라는 보장이 없습니다. 경합 조건이 있을 수도 있고 또는 없을 수도 있습니다.

  • 경합 조건이 있는 경우, 전달은 간헐적으로 작동합니다.
  • 경합 조건이 없는 경우, 전달은 항상 작동합니다.

페이지를 여러 번 테스트하여 전달이 예상대로 작동하는지 확인하십시오.

웹 사이트에서 base 태그를 사용하여 URL 및 링크를 확인하지 마십시오.

향상된 경험 작성기를 사용할 때 웹 사이트는 모든 링크 URL을 프록시에서 작동하도록 업데이트하는 프록시 서버에 의해 막후에서 조작됩니다. base 태그를 추가하는 경우 이러한 URL은 모두 브라우저에서 확인되며, 따라서 손상된 것으로 표시됩니다.

타깃팅에 사용할 수 있는 사이트의 중요한 텍스트는 요소 내에서 HTML 코드 안에 넣어야 합니다.

예를 들어 코드가 다음과 같은 경우에는 VEC에서 Shopping Cart란 텍스트를 타깃팅할 수 없습니다.

<a href="https://www.botanicchoice.com/shop.axd/Cart">
   <img alt="Shopping Cart"src="/images/ico-cart.gif"></img>
   Shopping Cart:
   <span id="HeaderCartQtyTotal">
      0
  </span>
  Items
  <span id="HeaderCartPriceTotal"></span>
</a>

이 예에서는 VEC에서 전체 앵커 요소가 선택되어 있어서 타깃팅이 수행되는 경우 다른 요소에 부정적인 영향을 줍니다.

JavaScript 코드에 top 또는 self 변수를 사용하지 마십시오.

고급 경험 작성기가 활성화되어 있으면 top 및 self 변수를 업데이트하여 iframe 버스팅을 비활성화합니다. 사용자 지정 JavaScript 코드 대신 iframe 버스팅을 추가하려면 X-frame-options 헤더를 사용하십시오.

페이지를 로드할 때 매개 변수가 추가되면 항상 웹 사이트를 테스트하십시오.

예를 들어 www.abc.com을 여는 데는 다음 URL 매개 변수가 사용됩니다.

www.abc.com?mboxEdit=1&mboxDisable=1

이 매개 변수는 사용하면 iframe에서의 편집을 가능하게 해줍니다.

이러한 매개 변수를 추가한 후에는 웹 사이트가 예상대로 로드되는지 확인하십시오.

페이지가 iframe에서 예상대로 열리는지 확인하십시오.

웹 사이트에서 iframe 버스팅 기술을 끄고 더미 페이지의 iframe 내에서 웹 사이트가 예상대로 열리는지 확인하십시오. 예:

<!DOCTYPE
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <iframe src="https://www.homedepot.com"</iframe>
</body>
</html>

주의 사항 section_A0436B7B85BA467FA9DE13A9A40E6A6E

시각적 경험 작성기를 사용하여 활동을 디자인할 때 다음 주의 사항을 고려하십시오.

이동 기능은 z-색인을 지원하지 않습니다.

z-색인 기능이 없으므로 이동된 요소는 다른 요소의 맨 위에서 이동할 수 없습니다. 자세한 내용은 제한 사항을 참조하십시오.

요소를 다시 정렬하는 것은 클릭 추적에 영향을 줍니다.

클릭 추적을 하도록 표시된 요소를 다시 배열하면 다시 배열된 요소의 경로가 변경됩니다. 결과적으로, 원래 요소가 다시 배열되기 전에 있었던 위치에 있는 요소는 클릭이 추적되는 요소입니다.

이 문제는 활동 컨텐츠를 전달하기 위한 코드와 클릭을 추적하기 위한 코드가 모두 페이지에 전달되는 동일한 코드 조각에 포함되어 있기 때문에 발생합니다. 다른 페이지로 이동하고 클릭 추적을 설정한다면, 활동 컨텐츠 코드와 클릭 추적 코드가 해당 페이지에 전달됩니다. 클릭 추적 페이지의 페이지 구조가 테스트가 실행되는 페이지와 유사하다면, 테스트 컨텐츠가 클릭 추적 페이지에 표시될 수도 있습니다.

mbox인 <div>에서는 요소 삽입이 작동하지 않을 수 있습니다.

mbox에 오퍼가 포함된 경우 mbox가 잘못 구현되면 요소를 삽입하는 것이 insertAfter가 아니라 insertBefore로 표시될 수 있습니다.

상위 요소와 하위 요소를 모두 편집할 때 상위를 먼저 편집하십시오.

요소에서 이미지 작업을 교체하고 상위 요소에서 텍스트나 HTML을 편집하면 전달 문제가 발생할 수 있습니다. 가장 좋은 워크플로우는 하위 요소의 이미지를 교체하기 전에 상위 요소를 편집하는 것입니다.

mbox가 하위 요소로 포함된 페이지 요소는 선택할 수 없습니다.

예를 들어, 페이지에 다음 내용이 포함된 경우,

<div>
  <div class="mboxDefault" >
  </div>
  <script>mboxCreate('myMbox');
</div>`

페이지에서 하드코딩된 mbox는 여전히 Target 호출을 수행하고 응답을 받으므로 경험에서 바깥쪽 div를 선택하면 안 됩니다. 이 응답은 더 큰 페이지 요소용으로 수행되는 응답을 방해합니다.

프록시 IP는 고객 환경에서 차단될 수 있습니다.

스테이징 환경과 같이 라이브가 아닌 사이트에서 향상된 경험 작성기를 사용하는 경우, 사이트가 RIP를 차단하면 시간 초과와 액세스 거부 오류가 표시될 수 있습니다.

여러 페이지를 추가할 때에는 경험 레일과 페이지 레일이 모두 동시에 열립니다. 결국 최적화할 사이트를 표시하기 위해 시각적 경험 작성기의 너비가 줄어듭니다. 따라서 리플로우 가능한 사이트가 줄어든 공간에서 예상과 다르게 나타날 수 있습니다.

해결 방법은 맨 위 왼쪽의 위쪽 화살표 아이콘을 클릭하여 경험 레일과 페이지 레일을 축소하는 것입니다.

제한 section_F33C2EA27F2E417AA036BC199DD6C721

이동 기능

요소는 뒤에 CSS 속성이 오는 컨테이너 외부로 이동할 수 없습니다.

교체 오퍼만 mbox에서 사용할 수 있습니다.

클래스 편집 및 다시 정렬 같은 작업은 mbox 내에서 허용되지 않습니다.

동일한 요소를 다시 배열하고 이동해서는 안 됩니다.

요소가 다른 위치로 이동되었고 상위 컨테이너를 선택한 후 하위 요소를 다시 배열하려는 경우, 이동된 요소는 영향을 받지 않고 현재 위치에 남아 있습니다. 재배열이 원하는 대로 표시되지 않을 수 있습니다.

이미지 교체 작업은 회전 메뉴에 있는 이미지에 작동하지 않습니다.

예를 들어 페이지에 6개의 이미지가 있는 회전 메뉴가 포함되어 있고 이미지를 회전 메뉴의 두 번째 이미지로 교체하려는 경우 이미지 교체 작업은 작동하지 않습니다.

해결 방법은 상위 컨테이너를 선택하고 HTML 편집 작업을 사용하여 원하는 이미지의 이미지 소스를 업데이트하도록 회전 메뉴의 HTML을 편집하는 것입니다.

mbox에서 이미지 크기를 조정할 수 없습니다.

mbox 요소에서 이미지를 교체한 다음, mbox 요소 크기에 따라 해당 이미지의 크기를 조정하려고 하면, 크기 조정이 허용되지 않습니다.

이미지를 교체한 후 편집 작업을 선택할 수 없습니다.

이미지를 교체한 후에는 Scene7 URL을 편집할 수 없습니다.

외부 소스가 있는 HTML 요소는 편집할 수 없습니다.

예: 비디오, 오디오 태그, embed, iFrames, 프레임

일반 텍스트나 이미지 태그 이외의 항목을 포함하는 앵커 요소에 대해서는 클릭 추적이 작동하지 않습니다.

예를 들어 요소에 JavaScript가 포함되어 있으면 클릭 추적이 작동하지 않습니다.

시각적 경험 작성기가 작동하려면 페이지가 URL 매개 변수를 허용해야 합니다.

일부 사이트는 해당 페이지에 대한 URL 매개 변수를 제거합니다. 그러나 시각적 경험 작성기를 사용하려면 이러한 매개 변수가 있어야 합니다.

스크립트를 html의 일부로 사용하는 동안 외부에서 액세스하는 모든 변수 및 함수는 창 네임스페이스 아래에 선언되어야 합니다.

이 스크립트는 페이지가 로드된 후 target.js 범위 내에서 실행됩니다. 따라서 로컬로 선언된 변수나 함수는 스크립트 블록 외부에서 액세스할 수 없습니다.

잘못된 코드:

<script>
  var myVar = 123;
  function myFunc() {
    //
  }
</script>`

올바른 코드:

<script>
  window.myVar = 123;
  window.myFunc = function() {
    //
  };
</script>

컨텐츠 라이브러리(Scene7)에서 이미지를 삽입하고 HTML을 편집하면 이미지 URL이 손상됩니다.

일부 더미 텍스트와 함께 'customHeaderMessage' div 내부에 앵커 요소를 추가합니다.

<a href="#">
<span> Dummy text </span>
</a>

요소 삽입 작업으로 이 div를 선택하여 이미지를 이 더미 텍스트 div의 동위 항목으로 삽입합니다.

이미지 삽입 후 모습은 다음과 같습니다.

<a href="#">
<span> Dummy text </span>
<img src=""> This is inserted Image. </img>
</a>

더미 텍스트 span을 제거합니다.

시각적 경험 작성기의 customCode 작업은 Internet Explorer 8에서 작동하지 않습니다.

스크립트 컨텐츠를 처리할 때의 IE8 제한 사항으로 인해 target.js는 IE8에서 이를 지원하지 않습니다. 이 문제를 해결하려면, 페이지가 jQuery를 포함하고 window 개체 전체에서 노출되는 경우 target.js는 customCode 작업 제공을 사용하면 됩니다. window.jQuery와 window.jQuery.fn.prepend가 정의되었는지 확인하십시오.

클릭 추적은 경험이 만들어진 페이지나 리디렉션된 페이지에서만 지원됩니다.

찾아보기 모드는 클릭 추적 VEC에서 사용할 수 있지만 페이지에서 클릭 추적을 추가하는 데에는 사용할 수 없습니다.

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654