> For the complete documentation index, see [llms.txt](https://docs.ledu.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ledu.kr/meta/init.md).

# 메타 픽셀 설치하기

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FaOam2djpDkftoWlAU93Y%2Fdocs_meta1.png?alt=media&amp;token=dc062118-9baa-41b9-b615-8b53084923c1" alt=""><figcaption></figcaption></figure>

## 메타 픽셀이 무엇인가요?

메타 픽셀은 로워드 브릿지 강의 호스팅에 방문한 사용자의 행동을 기록해서 광고에 활용할 수 있도록 도와주는 추적 도구입니다. 쉽게, 누가 우리 사이트에서 무엇을 했는지 메타에 알려주는 역할을 합니다.

메타 픽셀이 있으면 광고를 보고 누가 들어왔고, 그 사람이 어떤 행동을 했는지 추적이 가능합니다.

#### 구글 애널리틱스랑 뭐가 다른가요?

구글 애널리틱스와 메타 픽셀은 기능적으로 다릅니다.

| 구분    | 메타 픽셀        | 구글 애널리틱스   |
| ----- | ------------ | ---------- |
| 목적    | 광고 최적화       | 통계 분석      |
| 주 사용처 | 페이스북, 인스타 광고 | 전체 방문 분석   |
| 핵심    | 누가 전환했는가?    | 어떻게 이용했는가? |

### 메타 픽셀 설정 방법

[메타 광고 관리자](https://adsmanager.facebook.com/)에 로그인하신 뒤, 아래 사진의 비즈니스 포트폴리오 만들기를 통해 광고 계정을 생성해야합니다.

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FoCZOUyfvmfastyMfGTAZ%2Fimage.png?alt=media&amp;token=988bd4cc-5454-4e3d-aee3-c8583adcc65f" alt=""><figcaption></figcaption></figure>

해당 버튼을 클릭하면 아래 사진과 같은 팝업이 나타나게 되는데, 해당 팝업에서 빈 칸 없이 모든 내용을 채워주세요.\
채워진 내용을 기반으로 담당자 설정등을 진행하실 수 있습니다.

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FUTxmqEtDUMnOSAw6S8L2%2Fimage.png?alt=media&amp;token=dabe076b-d30f-4895-b3a9-f15a370ff541" alt=""><figcaption></figcaption></figure>

광고 계정 설정이 완료되었다면, 아래 사진과 같은 화면으로 접근하여 메타 픽셀 설정을 진행해야 합니다.\
좌측 관리자 메뉴 내에서 이벤트 관리자 메뉴를 클릭하여 이동해 주세요.

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2F0Aoex8uwqVEiAkC9dr35%2Fimage.png?alt=media&amp;token=44a95386-86eb-4e06-9851-489e2e738a89" alt=""><figcaption></figcaption></figure>

이벤트 관리자로 접근하면 데이터 연결 버튼이 나타나는데,\
해당 버튼을 클릭하여 신규 데이터를 연결해 주세요.\
데이터 연결을 클릭하면 새 데이터 소스 연결 팝업에서 웹을 클릭해 주세요.

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FpmnpWqx7ZUMck8j0lqbE%2Fimage.png?alt=media&amp;token=7d6a5ee0-41c1-4d73-92cf-801e44d8b5aa" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FLlBi5ug0xo5w1yHPhAm0%2Fimage.png?alt=media&amp;token=838092b1-f4c0-4c5c-bb06-0825e41b0a98" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FAikPnNt3munQG8OBY1tl%2Fimage.png?alt=media&amp;token=20e6aab8-ed3c-4369-99b0-6eaee8338d66" alt=""><figcaption></figcaption></figure>

만들기 버튼을 클릭하고 나면 아래와 같은 화면이 나타납니다.\
이제 픽셀을 사이트에 설치해야 합니다. 'Meta 픽셀 설정' 버튼을 클릭해줍니다.

클릭하면 '코드 직접 설치'를 클릭하여 접근해 주세요.

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FQ48czG63rqeVmaCpz6zS%2Fimage.png?alt=media&amp;token=44ffbb0a-a13a-4ce4-9614-4e2221c9d6c9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FXUTd9U0qLeUpuyDoiixf%2Fimage.png?alt=media&amp;token=0318f146-86b2-4f8b-a9c4-a2849d3d3ee1" alt=""><figcaption></figcaption></figure>

아래 사진과 같은 화면이 나타납니다.\
코드를 복사해서 로워드 브릿지 강의 호스팅에 연결하기 위해 코드 복사 버튼을 클릭해주세요.

{% hint style="info" %}
코드 복사를 클릭할 경우 자동으로 클립보드에 저장됩니다. Ctrl + V 하면 붙여넣을 수 있습니다.
{% endhint %}

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fvl7DqZpcQAvIJSE5ePsK%2Fimage.png?alt=media&amp;token=efaad8e5-04d4-4a4c-bc9b-46b951275a48" alt=""><figcaption></figcaption></figure>

복사했다면, 로워드 브릿지 강의 호스팅 관리자로 들어가서\
기본 관리 > 외부 코드 설정 페이지로 이동해 주세요.

외부 코드 설정에서 추가하기 버튼을 클릭해 주세요.

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2FMeK6SZK8C8pDEbKqMLqP%2Fimage.png?alt=media&amp;token=d6bfe30e-b491-4780-a4b9-8275d9b63567" alt=""><figcaption></figcaption></figure>

클릭하면 아래와 같은 상태로 나타나는데, 코드 타입을 \<script> 삽입 형으로 설정한 뒤 복사한 코드를 그대로 붙여넣어 주세요.

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fl22AlBwlCauJbIqUmllr%2Fimage.png?alt=media&amp;token=7e234ca9-fde6-4ffe-a964-13a6ea0d9fef" alt=""><figcaption></figcaption></figure>

붙어 넣을때 아래와 같은 값이 붙여넣어질텐데, 살짝 수정이 필요합니다.

```
<!-- Meta Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '2311164926059777');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=2311164926059777&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->
```

\<script>와 \</script>를 지워주세요.\
그럼 아래와 같이 최종적으로 입력됩니다.

```
<!-- Meta Pixel Code -->
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '2311164926059777');
fbq('track', 'PageView');
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=2311164926059777&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->
```

이 상태에서 \<noscript> ...... \</noscript>를 복사하고 지워주세요.\
지운 상태로 저장해 주시면 됩니다.

지운 것은 바로 외부 코드를 하나 더 추가해준 뒤,\
아래와 같이 noscript 삽입 형으로 선택해 주세요.

<figure><img src="https://1736609049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhXqpQKK3ny5H23yHno34%2Fuploads%2Fh3zSpAlA2TAFLxUxZbhv%2Fimage.png?alt=media&amp;token=7d37aa1c-966e-4e75-8809-ee2a49a477ba" alt=""><figcaption></figcaption></figure>

똑같이 \<noscript>와 \</noscript>를 지워준 뒤 아래 코드와 같이 저장하면 끝입니다.

```
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=2311164926059777&ev=PageView&noscript=1"
/>
```

시간이 지나면 실제 픽셀 이벤트가 발생하면 자동으로 집계됩니다다.