Webflow 로직을 사용하여 Mailchimp에 팔로어 포함

Mailchimp를 활용하면 홍보 이메일, 게시판 및 집중 캠페인을 작성하고 발송할 수 있습니다. Logic을 사용하면 Webflow 포털에서 Mailchimp에 새로운 팔로어를 등록하여 마케팅 접근 방식의 두 가지 중요한 구성 요소를 원활하게 통합할 수 있습니다.

시작하기 전에: 아직 그렇게 하지 않으셨다면, Mailchimp 계정 만들기 뿐만 아니라 메일침프 청중. 또한 Webflow 페이지에 양식을 삽입하고 필수 필드를 텍스트 category(방문자가 가입할 수 있는 이메일)와 통합해야 합니다.

이 튜토리얼에는 다음이 포함됩니다.

1. Mailchimp API 키를 생성하는 방법
2. 논리 흐름의 유효성 검사 시스템을 설정하는 방법
3. Mailchimp 대상 ID를 얻을 수 있는 방법
4. HTTP 요청 설정
5. 테스트를 수행하고 흐름을 릴리스하는 방법
6. 흐름에 따른 문제를 해결하는 방법

Mailchimp API 키 생성

1. Mailchimp 제어판으로 이동하세요.
2. 프로필 아이콘을 탭하고 선택하세요. 계정 및 청구
3. 로 진행 엑스트라 > API 키 
4. 때리다 키 만들기 
5. 최근 내용을 복제하세요. API 키 그리고 이 탭을 그대로 유지하세요!

논리 흐름의 검증 시스템 구축

1. 새 브라우저 탭의 Webflow Designer 내에서 웹페이지를 실행하세요.
2. 디자이너 캔버스에서 양식 블록을 선택하고 공개하세요. 양식 블록 설정
3. 누르세요 원천 목록을 작성하고 선택하세요 논리
4. 탭하세요 새 흐름 추가
5. 새 흐름의 이름을 지정합니다(예: "Mailchimp 게시판에 팔로어 포함"). 이름 섹션에 설명을 포함하세요. 설명 원하는대로 세그먼트
6. 드래그 HTTP 요청하기 흐름 편집기 캔버스를 차단하고 이름을 지정합니다(예: "Mailchimp에 발송 요청") 
7. 선택하다 API 토큰 ~로부터 입증 쓰러지 다 
8. 선택하다 머리글 ~로부터 다음에 추가 쓰러지 다
9. 입력란에 "Authorization"을 입력하세요. 머리글 필드 
10. 때리다 자격 증명을 선택하세요 > 새 자격 증명 추가 
11. API 토큰(예: "Mailchimp API 토큰")에 라벨을 붙입니다. 이름 세그먼트를 선택하고 설명 원하는대로 세그먼트 
12. “무기명”을 입력하십시오. {API 키}"에서 토큰 필드, 교체 {API 키} Mailchimp에서 복사한 API 키로
13. 수도꼭지 만들다 새 자격 증명을 저장하고 이 탭을 그대로 유지하세요! 

내부자의 팁: 또한 다음에서 양식을 새로운 로직 흐름에 연결할 수도 있습니다. 로직 패널 > 흐름목록. Logic의 양식 제출 트리거에 대해 자세히 알아보세요. 

Mailchimp 대상 ID 획득

1. Mailchimp 대시보드로 돌아가기
2. 로 진행 청중 > 모든 연락처
3. 여러 Mailchimp 대상을 보유하고 있는 경우 현재 청중 드롭다운을 클릭하고 Webflow 사이트에 연결하려는 대상을 선택하세요.
4. 선택하다 설정 드롭다운에서 다음을 선택하세요. 대상 이름 및 기본값
5. 귀하의 검색 잠재고객 ID

중대한: Mailchimp 계정의 데이터 센터에 해당하는 이 페이지 URL의 초기 세그먼트(예: us5, us6 등)를 기록해 두십시오. 이를 HTTP 요청에 포함하는 것이 중요합니다.

HTTP 요청 구성

논리 흐름 및 Mailchimp 인증 자격 증명을 설정한 후 Webflow를 다시 방문하여 흐름 내에서 HTTP 요청을 설정하세요. 이렇게 구성된 HTTP 요청은 사이트 방문자가 구독 양식을 제출할 때마다 Mailchimp에 새로운 구독자를 추가합니다. 

메모: Webflow 사이트가 열려 있던 탭을 닫은 경우 다음으로 이동하세요. 로직 패널 > 흐름 탭을 클릭하고 이전 단계에서 구성한 흐름을 선택합니다. 그런 다음 HTTP 요청하기 흐름 편집기 캔버스에서 블록을 클릭하여 블록 설정을 열고 후속 단계를 완료하세요.

1. 다음을 선택하세요. 요청 방법 드롭다운 메뉴에서 선택하고 우편
2. 에서 URL 필드에서 자리 표시자를 "https://"로 대체합니다.{dc}.api.mailchimp.com/3.0/lists/{목록_ID}/회원”. 바꾸다 {dc} Mailchimp 데이터 센터와 {목록_ID} Mailchimp에서 추출한 대상 ID로 
3. 아래 내용을 몸 필드:

         
            { "email_address": "", "status": "구독됨" }
         
      

4. 빈 따옴표 사이에 커서를 놓습니다. 몸 부분
5. 보라색 '을 클릭하세요.점” 아이콘을 선택하고 이메일 양식 필드 

흐름 테스트 및 배포

1. 딸깍 하는 소리 테스트를 실행하여 설정을 완료하세요. 
2. 제공된 입력 필드에 샘플 이메일 주소를 입력하세요.
3. 딸깍 하는 소리 테스트 실행 
4. 선택하다 취소 또는 데이터 적용 테스트 모달을 종료하려면
5. 선택하다 게시 
6. 선택하다 게시를 위한 단계 흐름
7. 사이트 게시

메모: 흐름 테스트 중에 오류 메시지가 표시되면 진단 지침을 따르고 위 단계를 반복하십시오. HTTP 요청 테스트에 대한 추가 정보를 찾아보세요.

흐름 관련 문제 해결

흐름을 테스트하는 동안 오류가 나타나면 다음 작업을 고려하십시오.

• 요청 URL이 정확한 URL을 사용하는지 확인하세요. 데이터 센터 및 잠재고객 ID
• 다음과 같은 무료 도구를 사용하여 요청 본문에 잠재적인 오류가 있는지 면밀히 조사하세요. JSONLint 

• 에 대한
• 최근 게시물

이완 막

Webflow 전문가 ~에 Tenten

4년 이상의 경험을 갖춘 Webflow 전문가이자 프론트엔드 개발자입니다. 저는 뛰어난 Webflow 경험을 만들기 위해 다재다능한 기술 세트(HTML, CSS, JS, Figma, Adobe)를 가져옵니다. 70개 이상의 프로젝트를 통해 맞춤형 코드와 시각적 개발을 원활하게 혼합하는 능력을 연마했습니다. 체계적이고 마감일을 준수하며 성장에 대한 열정을 갖고 있는 저는 역동적인 환경에서 탁월한 능력을 발휘합니다. 경계를 넓혀 놀라운 것을 만들어 봅시다.

Ewan Mak의 최신 게시물 (모두 보기)

• Workspace 스팟 및 멤버 포함 또는 제거 - 2024년 4월 15일
• 센터링 상자 요약 - 2024년 4월 15일
• 나중에 참조할 수 있도록 사이트 저장 - 2024년 4월 15일

관련 게시물

• Webflow 로직을 사용하여 Airtable에 항목 설정

  Logic의 Make HTTP 요청 블록을 사용하여 Webflow 양식 제출에서 Airtable로 데이터를 보냅니다.

• Webflow에서 Cinema 4D 만들기

  Cinema 4D 애니메이션을 처음부터 제작해 보세요.

• Webflow에서 시간대를 조정하세요.

  사이트 설정에서 올바른 시간대를 설정하면 사이트 방문자가...