Convert의 No-code Visual Editor와 Custom Code Editors: 차이점은 무엇이며 언제 사용해야 합니까?

비주얼 에디터와 관련하여 어떤 사람들은 그것을 좋아하지만 다른 사람들은 완전히 피하는 것을 선호합니다. 오늘날 웹사이트를 구축하기 위해 더 이상 프로그래머, 코더 또는 개발자가 될 필요가 없다는 것은 사실입니다. 과거에 개발 또는 IT 지원에 의존했던 많은 마케팅 및 제품 팀은 이제 접근성 및 비즈니스 혁신 혁신을 통해 코드 없는 움직임을 수용했습니다.

Convert의 Visual Editor는 사용자가 그래픽 사용자 인터페이스를 통해 웹사이트의 변경 사항을 즉석에서 디자인할 수 있는 코드 없는 도구를 제공합니다. 이는 비용을 절감할 뿐만 아니라 사업주가 시작하여 이전보다 더 빠르게 전환 목표를 달성할 수 있음을 의미합니다.

그러나 웹 디자인의 이러한 혁신에는 여전히 한계가 있으며 사용자 정의 코딩은 CSS 선택기를 사용하여 여러 유사한 요소를 한 번에 변경하거나 외부 JavaScript 파일을 변형의 일부로 로드하고 고유한 사용자 정의 이벤트를 추적하는 것과 같은 작업에 더 적합할 수 있습니다. .

이러한 이유로 Convert는 또한 사용자가 JavaScript 또는 CSS로 코드를 작성하거나 가져와서 페이지를 보다 고급으로 편집할 수 있는 사용자 정의 코드 편집기를 제공합니다.

무엇보다도, Convert는 유연성을 제공하고 모든 기술과 선호도의 사용자를 수용하는 것을 목표로 합니다. 고유한 코드를 작성하기로 선택했든 테스트에 대해 보다 단순화된 접근 방식을 선호했든 간에, Convert는 귀하를 위한 솔루션을 제공합니다!

변환 비주얼 편집기의 빠른 둘러보기

Convert의 Visual Editor를 사용하면 웹 페이지 콘텐츠를 생성, 편집 및 형식 지정하여 비즈니스 가설을 테스트할 수 있습니다.

변형의 요소에 대한 기본 및 고급 변경을 모두 수행하는 데 사용할 수 있는 여러 디자인 도구와 함께 제공됩니다.

Convert의 도구에는 HTML 편집기(새 텍스트, 이미지, 오디오 파일 또는 비디오 파일 추가)가 포함되어 있으며 사용자가 간단한 끌어서 놓기 기능으로 항목을 재배열하고 글꼴, 색상 및 크기를 수정하고 형식을 지정할 수 있습니다. 페이지의 텍스트입니다.

Visual Editor를 사용하면 강력한 사용자 지정 코드를 사용하여 고유한 HTML 및 JavaScript를 추가할 수 있으므로 방문자 경험을 완전히 사용자 지정할 수 있습니다.

변환은 변경 내용을 변경할 때 변형 콘텐츠에 대한 HTML 및 CSS를 작성합니다.

경험 요약의 변형 섹션에서 찾을 수 있는 Visual Editor 변환을 간략히 살펴보겠습니다.

클릭하면 Visual Editor가 나타납니다.

다음은 유용한 초보자 팁입니다.

1. 실험 제목은 실험의 이름입니다. 실험에 대해 기억하기 쉽고 설명적인 이름을 선택하십시오.
2. 저장 옵션에는 변경 사항을 저장, 실행 취소 및 다시 실행하는 기본 도구가 포함되어 있습니다.
3. 작업하면서 편집 모드와 찾아보기 모드 간에 전환할 수 있습니다.
4. 옵션 메뉴에는 편집기 페이지 변경, 요소 선택 설정 및 전역 경험 JS/CSS 코드와 같은 실험에 대한 공통 설정이 포함되어 있습니다.
5. 창 크기를 사용하면 다양한 태블릿/모바일 해상도의 웹 페이지를 볼 수 있습니다.
6. 변형 메뉴에는 실시간 미리보기와 같은 변형에 대한 공통 설정이 포함되어 있습니다.
7. <code> 상자를 사용하면 JS, CSS 또는 변형 코드를 사용하여 변형을 만들 수 있습니다.

다음 섹션에서는 Visual Editor의 몇 가지 주요 기능을 사용하는 방법과 사용하는 동안 직면할 수 있는 몇 가지 문제를 안내합니다.

언제 Convert의 Visual Editor를 사용해야 합니까?

단순 복사 변경을 위해 WYSIWYG 편집기 사용

많은 경험은 단일 페이지만 테스트하므로 고급 편집 전술이 필요하지 않습니다. 이러한 경우 A/B 테스트를 생성하는 가장 간단한 방법인 Convert의 WYSIWYG(What You See Is What You Get) 편집기를 사용할 수 있습니다.

헤드라인의 크기를 수정하거나, CTA의 텍스트를 변경하거나, 페이지 전체에서 요소를 이동하는 것과 같은 작업을 수행할 수 있으며, 편집기는 이러한 변경을 현실로 만들기 위해 JavaScript 코드를 생성합니다.

Convert의 WYSIWYG 편집기에서 변경할 때마다 관련 코드가 표시되고 '코드 편집기' 영역에서 편집할 수 있습니다(스마트 삽입 변환 기술(convert._$) 활용).

도중에 발생하는 문제를 해결하기 위해 항상 코드를 변경할 수 있습니다.

스마트 삽입 변환 기술을 사용하지 않고 일반 JavaScript를 삽입하려면 나중에 설명할 사용자 정의 JavaScript 섹션에 삽입할 수 있습니다.

헤드라인(또는 모든 텍스트) 변경

많은 A/B 경험에서는 사용자가 특정 조치를 취하도록 설득하기 위해 웹사이트의 기존 콘텐츠를 약간 조정하거나 추가해야 합니다.

이에 대한 몇 가지 예에는 홈페이지에 제품이나 서비스를 간략하게 설명하는 매혹적인 헤드라인을 추가하거나 페이지의 제약에 맞게 더 긴 텍스트 블록을 글머리 기호로 변환하는 것이 포함됩니다.

Convert의 Visual Editor를 사용하면 몇 분 안에 새로운 텍스트를 추가하고 필요에 따라 업데이트할 수 있습니다. 그런 다음 대안 페이지의 결과를 원본 페이지와 비교하여 청중에게 가장 효과적인 페이지를 결정할 수 있습니다. 편집기에서 인라인 텍스트 조정을 수행할 때 "텍스트 편집" 옵션을 사용하십시오.

텍스트 변경은 HTML 수정보다 덜 침습적이고 위험하며 대상 요소에 등록될 수 있는 문서 구조(CSS 선택기 및 기타 구성 요소 포함) 또는 이벤트 핸들러에 영향을 미치지 않습니다.

변형의 디자인, 레이아웃 및 콘텐츠 구조를 약간 변경하는 것은 웹 페이지의 성능을 향상시키는 간단한 방법이 될 수 있습니다.

예를 들어, 브랜드 메시지를 강조하기 위해 헤드라인 글꼴을 굵게 만들거나 하위 섹션에 맞도록 이미지의 배경 크기를 변경하면 청중이 다르게 반응할 수 있습니다.

Convert Visual Editor를 사용하면 CSS 코드를 업데이트하지 않고도 웹사이트에 시각적인 매력을 더하고 사이트 방문자의 관심을 끌 수 있는 서식 및 스타일 조정을 빠르게 수행할 수 있습니다.

임베디드 CSS 편집기를 사용하면 요소의 스타일을 변경할 수 있습니다. 페이지의 요소에 CSS 태그를 적용하면 다음을 변경할 수 있습니다.

• 배경 또는 텍스트 색상
• 테두리 두께, 색상 또는 스타일
• 글꼴 유형, 스타일, 크기 및 색상
• 텍스트 대/소문자, 정렬 및 줄 높이

Visual Editor를 사용하여 CSS 속성을 변경하는 것은 비코더에게 간단하지만 다음 사항을 고려해야 합니다.

• 스타일 변경 사항은 선택한 요소에 정확히 적용됩니다.
• 변경 사항을 다시 실행해야 하므로 변경 사항을 실행 취소하는 것이 까다로울 수 있습니다.
• Visual Editor에서는 제한된 양의 CSS 속성만 사용할 수 있습니다.

HTML 콘텐츠 삽입/편집

Convert의 Visual Editor에 있는 "텍스트 편집" 및 "WYSIWYG 편집기" 옵션은 초보 사용자를 위한 가장 간단한 편집 방법입니다.

또한 Convert Visual Editor를 사용하면 변형에 완전히 새로운 요소를 추가하고 A/B 테스트를 위해 고급 변경을 수행할 수 있습니다.

여기에는 요소의 HTML 코드를 즉시 수정하는 것이 포함됩니다. 예를 들어, 새로운 CTA 버튼을 방문 페이지에 추가하여 고객이 웹사이트를 더 쉽게 탐색할 수 있도록 하거나, 가입 양식에 사용자 정의 필드를 추가하여 비즈니스 고객의 특정 요구를 포착할 수 있습니다.

반면에 HTML 편집 기능은 더 복잡하므로 페이지의 HTML 코드를 변경할 수 있고 코드 수정 방법을 보다 유연하게 제어할 수 있습니다.

변경하려는 웹 페이지 요소에 대해 HTML 편집 옵션을 선택하면 편집기는 요소의 콘텐츠를 원시 HTML로 표시합니다.

변경 사항을 적용하면 Convert는 해당 요소의 최종 새 HTML 콘텐츠를 저장하여 요소의 원래 HTML을 대체합니다.

HTML 편집 옵션은 다음과 같은 방식으로 사용할 수 있습니다.

• Visual Editor에서 변경하려는 요소를 클릭한 다음 메뉴에서 HTML 편집을 선택합니다.
  

  

• HTML 편집 대화 상자가 열리면 수정을 위한 코드 조각을 추가합니다(정적 콘텐츠에만 해당).
  

  

• 변경 사항 저장을 클릭합니다.

팁 1: 제품 가격, 제품 세부 정보 및 기타 측면과 같이 웹사이트 CMS에서 생성된 동적 콘텐츠를 변경하지 않는 것이 좋습니다. 동적 콘텐츠 코드를 덮어쓰면 정적이 되어 해당 템플릿을 사용하는 모든 페이지에 동일한 자료가 표시될 수 있습니다. 대신 동적 콘텐츠에 대해 사용자 정의 JS/CSS 옵션을 사용하십시오. 이를 위해서는 사용자 정의 자바스크립트 코드를 개발해야 하기 때문입니다.

팁 2: 약간의 변경이 필요한 웹 페이지의 특정 요소에 대해 또는 단일 요소를 변경하려는 경우 HTML 편집 옵션을 사용하십시오. 전체 페이지 수정 HTML 작업은 권장되지 않습니다.

팁 3: 동일한 항목 모음에 대해 여러 HTML 편집 작업을 사용하지 마십시오. 모든 필수 변경 사항은 단일 HTML 작업으로 수행할 수 있습니다.

추천 이미지 A/B 경험 시작

A/B 테스트는 사이트에서 어떤 이미지가 가장 잘 작동하는지 결정하는 좋은 방법입니다.

Convert Visual Editor를 사용하여 추천 이미지의 "A" 및 "B" 변형을 만들고 서로 비교할 수 있습니다. 그런 다음 변형 이미지를 사용하여 전환율을 높일 수 있습니다.

Visual Editor에서 이미지를 클릭할 때 표시되는 "이미지" 옵션을 사용하여 웹사이트에 이미지를 변경하거나 추가할 수도 있습니다.

웹사이트의 사진을 변경하려면 다음 단계를 따르세요.

1. "이미지"옵션을 선택하십시오.
2. 다음으로 새 이미지를 삽입할 수 있는 메뉴가 나타납니다.
3. 그러면 이미지 대화 상자가 열립니다.
   

   

4. 로컬 장치에서 사진을 업로드하거나 이미지 대화 상자에서 사진을 가져온 URL을 간단히 입력할 수 있습니다.
   

   

또 다른 중요한 참고 사항은 동일한 이미지(1x, 2x 등)의 다른 크기를 업로드해야 다양한 화면 크기(예: PC, 대형 HD 디스플레이 및 모바일 화면)에서 올바르게 표시된다는 것입니다.

참고: 이미지 라이브러리에 업로드할 수 있는 최대 파일 크기는 이미지 파일당 2MB입니다.

요소 삭제 또는 내용 숨기기

또한 Convert의 Visual Editor를 사용하면 방문 페이지에서 특정 개체 또는 요소를 숨겨 방해를 최소화할 수 있습니다.

변형에서 요소를 제거하려면 "요소 숨기기" 옵션을 사용하십시오.

선택되면 요소의 표시 속성이 "없음"으로 설정됩니다.

클릭수를 목표로 추적

Visual Editor에서 웹 페이지를 변경할 때 특정 요소에 대한 클릭을 추적하고 이를 경험의 목표로 추가하는 것이 유용할 수 있습니다.

변환을 사용하면 웹사이트의 버튼 클릭을 추적하고 변형을 테스트할 때 방문자 측정항목을 수집할 수 있습니다.

변환에는 경험에 변환 목표를 추가할 수 있는 별도의 섹션이 있지만 여러 웹 사이트 버전을 디자인할 때 편집기 창을 사용하여 이를 수행할 수도 있습니다.

1. 추적하려는 페이지의 요소를 선택합니다.
2. 메뉴에서 클릭 추적을 목표 옵션으로 선택합니다.
   

   

3. 목표의 이름을 지정하고 저장하는 팝업이 나타납니다.
   

   

올바른 요소 선택기 경로 선택

Convert의 Visual Editor를 사용하면 현재 편집기에서 선택한 요소의 부모이고 포함하는 페이지의 요소를 선택할 수 있습니다.

이 기능은 편집기에서 요소를 선택하는 데 문제가 있거나 CSS 변경이 예상대로 작동하지 않는 경우에 유용합니다.

추적하려는 컨테이너 내의 요소를 클릭한 다음 컨테이너 선택을 선택하기만 하면 됩니다. 요소를 포함하는 HTML 요소의 긴 목록이 표시되어야 합니다.

목록 상단에는 선택한 HTML 요소 다음으로 큰 HTML 요소가 표시되고 하단에는 <body> 자체보다 먼저 가장 큰 HTML 요소가 표시됩니다.

즉, 목록은 가장 구체적인 것에서 가장 덜 구체적인 것입니다.

이것은 마우스로 쉽게 선택할 수 없는 더 넓은 요소를 선택하는 데 도움이 되는 쉬운 방법입니다. 종종 이것을 사용하여 재정렬하려는 항목이나 편집하려는 CSS 속성을 선택합니다.

요소 이동 및 크기 조정 또는 정렬

변환 비주얼 편집기를 사용하여 변형 페이지에서 페이지 제목, 이미지 또는 기타 요소를 이동, 크기 조정 또는 재정렬할 수 있습니다.

페이지의 적절한 영역으로 항목을 재배치하면 사용자에게 개체의 가시성이 향상되고 개체를 클릭하는 횟수가 늘어납니다.

또한 다른 요소 뒤에 있거나 앞에 있는 요소를 보고 선택할 수 있으므로 더 쉽게 상호 작용할 수 있습니다.

이동 및 크기 조정은 픽셀 계산 이동을 사용하여 요소를 조정합니다. 이것은 작은 이동에는 적합하지만 먼 거리에 걸쳐 요소를 이동하는 데는 도움이 되지 않습니다.

이동 및 크기 조정을 사용하여 페이지의 한 쪽에서 다른 쪽으로 요소를 드래그하고 싶을 수 있지만 브라우저마다 픽셀 길이를 다르게 해석합니다.

큰 픽셀 길이(수백 픽셀 이상)로 이동하면 브라우저 간 호환성 문제가 발생할 수 있습니다.

요소를 먼 거리로 이동하려는 경우 가장 좋은 방법은 요소를 최종 배치에 최대한 가깝게 끌 수 있는 재정렬 도구를 사용하는 것입니다.

여기에서 이동 및 크기 조정을 사용하여 요소를 최종 배치로 이동할 수 있습니다.

편집/찾아보기 모드 사용

Convert의 찾아보기 모드는 웹사이트가 에디터에 로드되는 동안 웹사이트와 상호작용할 수 있도록 설계되었습니다.

예를 들어, 탐색 모드를 사용하여 드롭다운 메뉴 또는 트레이 내에서 항목을 편집할 수 있습니다.

일반적으로 편집기에서 요소를 클릭하면 상황에 맞는 메뉴가 나타나므로 실제로 동적 요소와 상호 작용할 수 없습니다.

그러나 찾아보기 모드에 들어가면 브라우저에서 평소처럼 페이지와 상호 작용할 수 있습니다. 페이지가 수정하려는 상태가 되면 찾아보기 모드를 선택합니다.

변형에서 찾아보기 모드를 켜면 원본 페이지를 탐색할 때 변경 사항이 꺼집니다.

변경 사항은 저장된 상태로 유지되지만 이 경우 변형 메뉴에서 실시간 미리보기 옵션으로 테스트하는 것이 좋습니다.

창 크기 옵션을 사용하여 다양한 장치에서 변경 사항 미리보기

Convert Visual Editor를 사용하여 태블릿/모바일 사용자에게 표시되는 페이지 콘텐츠를 테스트할 수 있습니다.

이렇게 하려면 Visual Editor의 상단 패널에서 창 크기로 이동합니다.

창 크기 드롭다운에서 화면을 보는 데 사용할 해상도를 선택할 수 있습니다.

현재 창 크기는 1280px, 1024px, 768px, 640px와 같은 해상도 옵션을 제공합니다.

해상도를 선택하면 편집기가 다시 로드되어 선택한 해상도로 사이트가 표시됩니다.

사용자 에이전트 옵션을 사용하여 다양한 브라우저에서 변경 사항 미리보기

Convert의 Visual Editor에서 사용자 에이전트 드롭다운을 사용하여 다양한 브라우저와 장치에 표시되는 페이지 콘텐츠를 테스트할 수 있습니다.

먼저 브라우저 유형을 선택하여 Chrome, Safari, Firefox 및 Edge와 같은 다양한 브라우저에서 웹 페이지가 어떻게 작동하는지 확인합니다. 그런 다음 데스크톱, Mac, iPad, Android 및 iPhone과 같은 장치를 기반으로 브라우저를 추가로 필터링할 수 있습니다.

Visual Editor 변환을 사용하는 동안 발생하는 문제

프록시를 통해 로드된 페이지

변환 추적 코드가 설치되어 있는 경우 Visual Editor를 사용할 때 일반적으로 브라우저의 다른 탭에 동일한 탐색 세션이 표시됩니다.

그러나 추적 코드가 올바르게 설치되었음에도 웹 사이트의 특정 기능을 사용할 수 없는 경우가 있었습니다.

예를 들어 장바구니가 예상대로 작동하지 않거나(빈 상태로 표시) 웹사이트의 보안 영역에 로그인할 수 없습니다.

대부분의 경우 이러한 문제는 특정 HTTP 헤더 사용을 통해 다른 도메인에서 호스팅되는 iframe에서 웹사이트를 로드할 때 웹사이트에 있는 제한으로 인해 발생합니다.

다음 파란색 경고는 페이지에 전환 추적 코드가 설치된 경우에도 이 문제를 나타낼 수 있습니다.

“Convert Experiment의 프록시를 통해 사이트를 로드했습니다. 여전히 페이지를 편집할 수 있지만 일부 기능이 누락되었을 수 있습니다. "에 대해 자세히 읽어보십시오.

이 문제를 해결하려면 Google Chrome 사용으로 전환하고 Convert Experiences Debugger Extension을 설치할 수 있습니다.

설치가 완료되면 확장을 클릭하고 경험에 사용 중인 도메인을 추가한 다음 확장을 켭니다.

이렇게 하면 문제가 있는 헤더가 제거되고 페이지가 Visual Editor 내에서 로드될 수 있으므로 문제 없이 경험을 만들 수 있습니다.

차단된 콘텐츠 로드

Visual Editor 변환에서 HTTP 페이지를 로드하려고 하면 브라우저에 "로드 중인 콘텐츠가 안전하지 않거나 안전하지 않습니다"라는 알림이 표시됩니다.

이 섹션에서는 변환 편집기에서 안전하지 않은 소스 또는 암호화되지 않은 콘텐츠에서 콘텐츠 로드를 허용하는 방법을 설명합니다.

사용자 정보(이름, 비밀번호 등)를 요청하는 웹사이트는 보안 연결(HTTPS)을 사용하여 데이터를 주고받습니다.

HTTPS 페이지에 안전하지 않은(HTTP) 콘텐츠(JavaScript 또는 CSS)가 있는 경우 브라우저는 안전하지 않은 콘텐츠가 로드되는 것을 자동으로 방지하고 주소 표시줄에 방패 아이콘이 나타납니다.

안전하지 않은 콘텐츠를 차단하면 민감한 정보가 손상되는 것을 방지할 수 있습니다.

기본적으로 Visual Editor 변환은 HTTPS를 통해 보안 콘텐츠만 로드합니다.

Convert Editor에서 HTTP를 통해 안전하지 않은 페이지를 로드하려고 하면 브라우저에 경고가 표시되고 웹 사이트가 호환 모드로 로드됩니다.

이 경고는 어떤 식으로든 실제 웹사이트에 영향을 미치지 않으며 일부 기능이 누락될 수 있지만 여전히 페이지를 편집할 수 있습니다.

콘텐츠가 차단되는 것을 방지하려면 HTTPS를 통해 페이지를 안전하게 로드하세요.

Convert Editor에서 HTTP 페이지를 로드하려면 먼저 브라우저에서 차단된 콘텐츠를 활성화하십시오.

보호된 사이트 로드

간단한 사용자 이름과 암호로 보호된 사이트(예: 준비 또는 개발 웹 사이트)가 있는 경우 Visual Editor 변환을 문제 없이 사용할 수 있습니다.

비주얼 편집기에서 옵션 → HTTP 기본 인증으로 이동한 후 사이트에 액세스하는 데 필요한 정보를 입력합니다.

SPA에서 테스트

비주얼 편집기의 한계 중 하나는 단일 페이지 앱에 대한 A/B 테스트를 설정하는 데 사용할 수 없다는 것입니다. 단일 페이지 앱을 사용하는 경우 아래의 사용자 지정 편집기를 살펴보는 것이 좋습니다.

사용자 정의 편집기 변환

대부분의 Convert의 Visual Editor 기능은 끌어서 놓기 방식을 통해 액세스할 수 있습니다.

그러나 회사가 성숙해지면 Visual Editor에 의해 제한될 수 있는 보다 고급 환경을 실행하려고 할 수 있음을 이해합니다.

회사에서 Visual Editor가 아닌 사용자 지정 코드를 사용하여 환경 및 배포를 설정하기로 선택한 경우, Convert에 바로 사용할 수 있는 도구가 있습니다.

Visual Editor 외에도 기술적으로 고급 사용자를 위한 맞춤형 코드 편집기를 제공합니다. Convert의 코드 편집기를 사용하면 JavaScript 또는 CSS로 코드를 작성하거나 가져와서 페이지를 빠르게 조정할 수 있습니다.

변환 플랫폼은 유연하여 한 편집기에서 다른 편집기로 쉽게 전환하고 경험 중 언제든지 변경 사항을 볼 수 있습니다.

Convert의 사용자 정의 코드 편집기는 다음과 같은 경우에 자주 사용됩니다.

• (모든 방문자가 아닌) 특정 변형으로 분류된 방문자에 대해 사용자 정의 코드를 실행합니다.
• CSS 선택기를 사용하여 개별적으로 변경하는 대신 여러 유사한 요소를 한 번에 변경합니다.
• 변형의 일부로 외부 JavaScript 파일을 로드합니다.
• 사용자가 페이지를 다시 로드할 필요 없이 실행되는 단일 페이지 앱에서 경험을 실행합니다.
• 스크롤 깊이 및 마우스 호버와 같은 고유한 사용자 정의 이벤트를 추적합니다.
• 맞춤 측정항목에 대한 API 호출 추가

사용자 정의 JavaScript 편집기 변환(프로젝트, 경험 및 변형 수준)

변환을 사용하면 프로젝트, 경험 또는 변형의 일부로 JavaScript 스니펫을 포함할 수 있습니다. 프로젝트, 경험 및 변형 사용자 정의 코드는 모두 매우 유사하지만 한 가지 주요 차이점은 범위입니다.

프로젝트 JavaScript 는 사이트 전체에서 실행되므로 잠재적으로 모든 경험에 영향을 미칠 수 있습니다. 경험 JavaScript는 경험 수준에서 사용되는 반면 변형 JavaScript는 변형 수준에서 사용됩니다.

Convert의 사용자 정의 JavaScript 편집기는 Experience JavaScript와 Variation JavaScript 전에 Project JavaScript를 첫 번째 실행 지점으로 사용합니다.

Project JavaScript를 먼저 사용하면 고급 실험을 실행하기 위해 기본 사이트의 코드를 변경할 필요가 없습니다.

일반적으로 위에 나열된 모든 사용 사례에 대해 세 가지 옵션 중 하나를 사용할 수 있지만 변형 수준, 경험 수준 또는 프로젝트 수준에서 작업하는지 여부에 따라 선택을 결정해야 합니다.

프로젝트 자바스크립트 편집기

글로벌 프로젝트 JavaScript 편집기는 구성 → 글로벌 프로젝트 JavaScript 영역에서 찾을 수 있습니다. 이 섹션의 코드는 전환 추적 코드가 있는 모든 위치에 포함됩니다.

이 코드는 다른 코드보다 먼저 호출되며 일반적으로 분석 스니펫 또는 프로젝트의 경험에서 트리거하려는 코드를 포함하는 데 사용됩니다.

자바스크립트 에디터를 경험하세요

변환을 사용하면 경험이 트리거될 때 JavaScript 스니펫을 페이지에 삽입할 수 있습니다. 이 스니펫은 웹 페이지에 포함할 다른 라이브러리와 마찬가지로 포함됩니다.

이는 Visual Editor가 포함된 경험 유형에만 적용됩니다. 즉, 분할 URL 실험에서는 이 작업을 수행할 수 없습니다.

Convert의 경험 수준 JavaScript 코드에 대한 일반적인 사용 사례는 다음과 같습니다.

• 변환 정보를 분석 서비스로 보냅니다.
• 사용자 지정 이벤트에 대한 API 호출을 추가합니다.
• 여러 변형에서 사용할 수 있는 함수를 추가하고 변형 코드에서 다른 매개변수로 호출합니다.

Experience JavaScript Editor는 Visual Editor → Cog/Gear Icon → Global Experience JS 섹션에서 찾을 수 있습니다.

코드는 스크립트 태그 내부의 헤드 섹션에 추가되는 방식과 유사하게 테스트하거나 개인화하는 페이지에 추가됩니다.

코드가 트리거되도록 클릭 또는 호버 이벤트와 같은 JS 이벤트를 추가할 수도 있습니다.

변형 JavaScript 편집기

이 편집기는 각 방문자에게 할당된 변형에 포함하려는 표준 JavaScript를 삽입하는 데 사용됩니다.

이 편집기는 Visual Editor → Variation n(Variation 메뉴) → Custom JavaScript에 있습니다.

사용자 정의 JavaScript를 사용한 고급 A/B 테스트 예

전체 섹션의 위치를 ​​랜딩 페이지로 변경하는 것은 Visual Editor로 수행할 수 없지만 고급 테스트가 필요합니다.

웹사이트의 리뷰 부분의 위치를 ​​높이는 것은 단지 예일 뿐입니다.

이를 수행하는 유일한 실용적인 방법은 다음이 필요한 JavaScript 사용자 정의 코드를 사용하는 것입니다.

1. Convert에 로그인하지 않은 새 브라우저 탭을 엽니다.
2. 테스트 웹 페이지로 이동합니다.
3. 드롭다운 메뉴에서 "오른쪽 클릭"을 선택합니다.
4. 드롭다운 메뉴에서 "검사"를 선택합니다. 이것은 Google Chrome DevTools 개발자 도구입니다(백엔드에서 발생하는 일이라고도 함).
5. 테스트할 전체 부분이 포함된 HTML 요소를 찾습니다.
6. 자바스크립트 코드를 작성합니다. (Convert에 추가한 샘플 웹사이트의 코드 구문은 아래에 나열되어 있습니다.)
   
   let 헤더 = 문서 . querySelector ( '.elementor-section-reviews' )

   let intro = 문서 . 쿼리 선택기 ( ' .elementor -element-5c31' )

   하자 서비스 = 문서 . 쿼리 선택기 ( ' .elementor -element-0aa0' )

   헤더. insertBefore ( 서비스, 소개 )

   let header = document.querySelector('.elementor-section-reviews') let intro = document.querySelector('.elementor-element-5c31') let services = document.querySelector('.elementor-element-0aa0') 헤더. insertBefore(서비스, 소개)
7. 변환 편집기로 돌아갑니다.
8. 테스트 전체에서 JavaScript를 실행합니다.

사용자 정의 CSS 편집기 변환(경험, 변형 수준)

변환에서 사용자 정의 CSS 편집기를 사용하여 사이트 페이지 중 하나에서 특정 요소의 모양을 변경할 수 있습니다.

예를 들어, 글꼴을 변경하거나 테두리를 추가하여 헤드라인을 더 눈에 띄게 만들고 싶을 수 있습니다.

Convert Visual Editor를 사용하여 사이트 요소를 추가, 변경 및 제거할 수 있지만 CSS에 대한 기본적인 이해가 있는 경우 고급 테스트를 수행할 수 있습니다.

이 섹션에서는 경험 또는 변형의 일부로 CSS를 사용하여 요소의 스타일을 변경하는 방법을 보여줍니다.

CSS 편집기를 경험하세요

CSS를 사용하여 사이트 요소의 스타일을 지정하고 경험 수준에 변경 사항을 적용하는 방법은 다음과 같습니다.

1. 실험으로 이동하거나 새 실험을 만드십시오.
2. Visual Editor 상단에서 톱니바퀴 아이콘을 선택한 다음 Global Experience CSS를 선택합니다.
   

   

3. 사용자 정의 CSS 코드를 추가하십시오.
4. 저장하고 계속하기를 클릭합니다.

축하합니다! 이제 변경 사항을 미리 보고 전 세계에 게시할 수 있습니다.

변형 CSS 편집기

변형 수준에서 CSS 변경 사항을 적용할 수도 있습니다.

이것은 Visual Editor → Variation n (Variation Menus) → Custom CSS로 이동하여 수행할 수 있습니다.

이 편집기를 사용하면 방문자에게 특정 변형이 할당될 때 웹 페이지에 추가될 일반 CSS를 삽입할 수 있습니다.

팁: CSS 규칙은 영구적이고 경쟁 조건의 영향을 받지 않으므로 CSS 변경 사항은 다른 편집기에 포함된 변경 사항보다 오래 지속됩니다.

사용자 정의 CSS를 사용한 고급 A/B 테스트 예

사람들이 웹사이트를 방문할 때 원하는 것을 빠르게 찾을 수 있기를 바랍니다.

일부 사용자에게는 웹 사이트를 탐색하기 위해 페이지 맨 위로 스크롤하는 것이 지루할 수 있습니다.

고정 메뉴는 방문자가 영구적인 탐색 모음을 통해 필요한 항목을 빠르게 찾을 수 있도록 하는 간단한 솔루션을 제공합니다.

고정 메뉴를 사용하면 방문자의 경험이 향상되고 더 많은 콘텐츠를 소비하게 되어 이탈률이 낮아집니다.

사용자 정의 CSS를 사용하여 고정 메뉴를 만들 수 있습니다.

 탐색 {
  배경:#ffff;
  높이: 70픽셀;
  Z-인덱스:999;
  여백: 0 자동;
  border-bottom:1px 솔리드 #dadada;
  너비: 100%;
  위치: 고정;
  상단:0;
  왼쪽:0;
  오른쪽:0;
} 

결론

오늘날의 세계에서는 코드 없는 솔루션 과 사용자 지정 코드 편집기가 모두 필요합니다.

Convert는 더 많은 기업이 디지털 경제에 접근하는 데 도움이 되는 코드 없는 솔루션과 기술에 정통한 사용자가 웹 사이트를 추가로 사용자 정의할 수 있는 기능을 제공하는 사용자 정의 코드 편집기를 모두 제공합니다.

코딩은 개발자가 사용자 정의 코드 편집기를 사용하여 획기적인 A/B 테스트 아이디어를 생성하면서 계속 확장될 기술입니다. 마찬가지로 코드가 없는 솔루션은 빠르게 자리를 잡고 고객 전환을 시작하려는 비즈니스를 위한 웹사이트 구축 프로세스를 계속해서 쉽게 도와줄 것입니다!

모든 고객은 Convert의 비주얼 및 코드 편집기를 사용할 수 있습니다. 당사 제품에 관심이 있으시면 언제든지 데모를 요청하십시오!