메타 페이스북 픽셀 생성및 설치 방법 (2024버전)

이렇게 비즈니스 계정으로 접속을 하시면 이벤트 관리자라고 있을 겁니다 이벤트 관리자로 들어오시구요 그 다음에 여기 보시면 항상 녹색 버튼 데이터 소스 연결이라고 하는게 항상 그 페이스북 픽셀을 새로 생성할 때 쓰는 버튼이라고 생각하시면 됩니다. 그리고 이미 기존에 만들어져 있는 그런 내 비즈니스 계정에 만들어져 있는 픽셀을 보실 때는 여기 데이터 소스라고 되어 있는 걸 이렇게 보시면 됩니다. 근데 여기는 지금 해당 광고 계정에 대한 픽셀이 그 해당 비즈니스 계정에 지금 생성되어 있는 모든 픽셀들이 이렇게 나옵니다. 그쵸? 보이시죠? 자, 그 다음에 이제 여기에서 이거는 이제 이미 생성된 데이터 소스구요. 여기에서 이제 새로운 걸 하나 만들 때는 항상 이 녹색 버튼을 기억하시면 됩니다. 데이터 소스 연결 누르시고 웹이라고 되어있는 걸 선택을 해주면 됩니다. 그쵸? 그 다음에 연결 그리고 이름은 티스토리 테스트용 픽셀이라고 할게요. 연도 부분을 좀 해주는게 좋을 것 같아서 2014 티스토리 테스트용 픽셀 이렇게 해보겠습니다. 그리고 만들기 버튼을 눌러줍니다. 그러면 일단 이제 여기 하나 완성돼서 만들어진 게 보이시죠? 그리고 이제 웹사이트 URL을 입력하세요 하고 파트너 이미 그런 솔루션들은 이런 파트너를 통해서 연결할 수 있다는 거고요 우리는 내가 지금 연결하고 싶은 웹사이트 URL을 연결을 하면 됩니다. 저는 이런 테스트 블로그를 하나 만들어 놓은 게 있습니다. 이걸 그대로 복사해서 한번 집어넣고 웹사이트 URL은 이렇게 입력을 했구요. 그 다음에 확인 버튼을 누르겠습니다. 다음 버튼을 또 눌러볼게요. 그러고 나면 이제 뭐 메타에 데이터를 연결하는 여러가지가 있다고 나오고 가이드가 필요하신 경우 연락해달라고 하고 뭐 어쩌구저쩌구 지침 확인하기 이런게 있는데 이거는 그냥 무시하시고 직접 해보기를 누르시면 됩니다. 누르시고 다음 버튼을 눌러볼게요 자 그러면 이렇게 두가지가 나오는데요 여러분들이 이제 메타 픽셀 및 전환 api 라고 하는게 이제 새로 나온게 있어요 어 픽셀은요 일단 여러분들 그 주변에 개발자나 이런 이런 전환 API 픽셀을 설치할 수 있는 도움을 주실 수 있는 분들이 있으면 그런 전문가한테 의뢰를 하셔가지고 이거를 설치하는게 훨씬 효과는 더 좋습니다. 그래서 그런 상황이 되시는 분들은 이걸 해서 진행을 하시면 되구요. 여기서는 그냥 메타 픽셀 전용으로 이렇게 만들어 보겠습니다. 자 그러면 이런 화면이 나옵니다 웹사이트에 픽셀 코드를 직접 추가하겠느냐 자 그럼 코드 직접 설치라는거 자 요거를 누릅니다 우리는 지금 직접 설치를 해야되니깐요 그죠 자 그리고 코드 복사 버튼을 요렇게 누르겠습니다 자 그리고 여기 보시면 이제 이 코드를 복사해서 어디에다가 집어 넣어야 되는지에 대해서 이렇게 나와 있는데요 head 태그 바로 위에 붙여주세요 라고 되어 있는데 이게 슬러시 이렇게 헤드라는 것은 헤드의 시작점이 아니고 헤드가 거의 끝나는 지점을 얘기하는 겁니다 그 바로 앞에 붙여 놓으면 된다 뭐 그런 뜻입니다 자 어쨌든 코드 복사를 하시고 슬러시 헤드 태그 바로 위에 붙여주세요 자 일단 그러면 끌게요. T스토리로 가시면 이렇게 관리자 모드로 들어가시면요. 여기 왼쪽에 이렇게 내려 보시다 보면 스킨 편집이라는 버튼이 있어요. 이쪽으로 들어오시면 HTML 편집이라는 게 있습니다. 그러면 요거를 클릭하시구요. 자 이렇게 넘어오시면 되구요. 그러면 슬러시 헤드를 좀 찾아봐야겠죠. 슬러시 헤드가 어디 있는지. 자 여기서 이제 찾으면 여기 여기서 슬러시 헤드가 시작이 됐고 여기서 지금 끝났잖아요 그럼 여기 이제 앞에다가 집어 넣으라는 건데 처음에 좀 찾기 힘드시면 컨트롤 F 를 누르신 다음에 찾아보시면 되요 이렇게 슬러시 헤드 자 H E A B 이렇게 하시면 이렇게 주황색으로 표시를 해 주죠 그러면 여기 앞에다가 집어 넣으라는 이쯤에 집어넣으면 되겠죠 자 혹시 모르니까 저는 코드 복사를 다시 해보겠습니다 코드 복사가 되겠죠 그리고 한번 붙여넣기를 해볼게요 자 그러면 여기 이제 픽셀 코드 뭐 이렇게 나와있죠 &MetapixelCode MetapixelCode 자 여기서부터 여기서부터 여기까지가 픽셀 코드인거죠 자 이렇게 하고 여기 적용 버튼을 누르면 픽셀 코드가 들어갔구요 자 요거는 지금 적용을 안할게요 그리고 이제 이거보다는 제가 더 권장드리는 방법은 구글 태그 매니저를 만드신 다음에 여기에다가 픽셀을 집어넣는 겁니다. 구글 태그 매니저 계정을 생성하는 법은 제가 링크걸로 넣을 테니까요. 좀 참고하세요. 태그 매니저의 컨테이너 계정을 하나 만들었으면 우리 T스토리 블로그에 여기에 픽셀 값을 넣어줘야겠죠. 되게 쉽습니다. 작업 공간에 태그라는 메뉴로 오시면요 여기서 이제 새로 만들기 버튼을 클릭을 하시고 여기에는 우리가 지금 2024 t-story t-story 불러보잖아요 그죠? 테스트 불러보잖아요 그죠? 2024 t-story 테스트 그냥 픽셀이라고 할게요 그러면 무슨 얘기인지 알 수 있으니까요 이렇게 하고 태그 구성 이렇게 누르시고 여기에서 지금 페이스북 픽셀 넣도록 이렇게 지원해주는 도구는 되어있지 않아요 그래서 이제 맞춤 html을 클릭하시구요 여기에다가 픽셀을 넣어줍니다 넣어주시고 이렇게 넣어주고 픽셀을 붙여넣기 해서 넣어주고 그 다음에 저장 버튼을 누르는게 아니고 내려보시면 트리거 트리거 버튼을 눌러주시면 됩니다 트리거 버튼을 누르시고 트리거는 어떻게 해야 돼요? 모든 페이지 뷰를 선택해 주시면 돼요 그러면 T스토리 블로그의 모든 페이지에 대해서 메타픽셀이 추적을 하겠다 그런 뜻이 되는 겁니다 이렇게 하시고 저장 버튼을 눌러 주시면 됩니다 이렇게 눌러 주시면 이렇게 올라왔죠? 그러면 요거를 제출 버튼을 누르시고 게시 버튼을 눌러 주시고 계속 이렇게 하시면 이게 이제 태그 매니저에서 이제 적용이 됩니다. 자, 그리고 이제 이게 제대로 작동을 하고 있는지 우리가 좀 봐야겠죠? 그래서 태그로 오신 다음에 미리 보기라는 게 있죠? 그걸 태그 매니저에서는 미리 보기라는 거를 눌러주시고요. 자, 그럼 우리 사이트 지금 이 T스토리 블로그죠? 이 T스토리 블로그의 도메인 정식 도메인만 복사를 하셔서 이렇게 붙여넣어 주시면 됩니다 자 그러면 이렇게 사이트가 뜨고 요런게 뜰겁니다 그죠? 그리고 태그 어시스턴트라는게 이렇게 뜰거에요 그죠? 그리고 여기에는 지금 태그즈 파이어드 태그가 실행되고 있다는 뜻이에요 태그가 실행되고 있는 방금 우리가 집어넣은 티스토리 테스트 픽셀이 잘 실행되고 있는 걸 확인할 수 있습니다 아까 픽셀이 실행되고 있는 것 까지 봤죠? 픽셀이 실행되고 있는 것 까지 봤으면 이제 여기로 오셔서 계속 버튼을 누르시고 이걸 완료를 해줘야 됩니다 계속버튼을 누르시고 자동고금매칭은 설정을 하시는게 좋아요 하시는게 좋고 요런것들도 다 하시는게 좋아요 그 다음에 계속버튼을 눌러줍니다 그 다음에 이벤트 설정 도구 열기로 지금 테스트 해보는 것은 굳이 지금은 하지 않으셔도 됩니다 일단은 픽셀이 심어졌는지를 먼저 보는게 중요하니까요 그러면 그냥 픽셀 계열로 이동하시면 이제 최종적으로 픽셀 설정이 끝나게 됩니다