일반적인 맞춤 매개변수 형식 문제 해결하기

이 도움말에서는 맞춤 매개변수를 형식에 맞게 작성하는 방법과 사이트에 태그를 추가할 때 발생할 수 있는 문제를 해결하는 방법을 살펴봅니다. 웹사이트에 자바스크립트 코드 및 자바스크립트 이외의 코드를 추가하는 방법과 코드가 혼합되는 일반적인 사례가 나와 있으니 참고하시기 바랍니다.

시작하기 전에

맞춤 매개변수를 사용하려면 먼저 사이트에 동적 리마케팅용 태그를 추가하는 방법을 참고하세요.

앰퍼샌드(&) 관련 참고사항

앰퍼샌드는 HTML 코드 내부에서는 (<img> src 속성에) '&amp'로 인코딩해야 하며, 자바스크립트 코드 내부에서는 인코딩하지 않습니다. 픽셀 피기배킹(piggybacking)을 허용하는 태그와 컨테이너(예: 플러드라이트) 중 상당수는 URL이 HTML 인코딩된 URL이 아님을 가정하고 있습니다. 따라서 앰퍼샌드를 이중으로 인코딩하는 오류가 자주 발생하고, 그 결과 추적이 정상적으로 작동하지 않게 됩니다. 컨텍스트에 따라 적절한 URL을 사용해야 합니다. 확실하지 않은 경우 Chrome 확장 프로그램인 Google Tag Assistant를 사용하여 정상적으로 구현되었는지 확인하세요.

Google 태그 관리자 사용하기

사이트에 동적 리마케팅 태그를 추가하는 대신 Google 태그 관리자를 사용할 수 있습니다. 이 옵션을 이용하면 타사(Google)를 통해 tagdata를 전송할 수 있습니다.

맞춤 매개변수 형식 설정

• ID가 여러 개인 페이지(예: 장바구니 페이지)는 대괄호를 써서 ID를 묶으세요. 예: flight_destid: ["123", "456"]
• 문자열 맞춤 매개변수에는 작은따옴표나 큰따옴표를 사용하세요. 작은따옴표와 큰따옴표 중 하나만 일관되게 사용해야 합니다. 예를 들어 작은따옴표를 사용하기로 한 경우 모든 값에 작은따옴표만 사용해야 합니다.
• 숫자 맞춤 매개변수에는 따옴표를 사용하지 마세요. 예: flight_totalvalue: 200.99
• 쉼표를 사용해 매개변수를 구분하세요. 쉼표를 넣지 않으면 태그가 정상적으로 작동하지 않습니다.
• 맞춤 매개변수에는 문자, 숫자, 밑줄만 사용할 수 있습니다. 맞춤 매개변수가 숫자로 시작되거나 공백을 포함해서는 안 됩니다.
• 이 도움말에서 권장하는 값은 동적 리마케팅 캠페인을 설정할 때 Google Ads에서 생성하는 세그먼트를 형성하므로 최적의 설정을 위해 이러한 값을 사용하세요. 내 사이트에 특별히 필요한 기타 페이지를 정의할 때에는 다른 값을 사용할 수 있습니다.

맞춤 매개변수 예

다음은 기본적인 맞춤 매개변수가 모두 구현되어 있는 항공사 웹사이트의 예입니다.

맞춤 매개변수 설정 과정에서 발생하는 일반적인 오류

아래에서는 맞춤 매개변수를 구현할 때 자주 발생하는 실수를 항공사 웹사이트의 예를 통해 설명합니다. Tag Assistant를 사용하면 이와 같이 자주 발생하는 실수를 대부분 찾아낼 수 있습니다.

1. 문자열 값을 따옴표로 처리하지 않은 경우입니다. 예를 들면 다음과 같습니다.

<script type="text/javascript"> var google_tag_params = { flight_destid: "234", flight_pagetype: purchase, flight_totalvalue: 120.99 }; </script>

올바른 예는 다음과 같습니다.

<script type="text/javascript"> var google_tag_params = { flight_destid: "234", flight_pagetype: "purchase", flight_totalvalue: 120.99 }; </script>

작은따옴표를 사용해도 무방하지만, 큰따옴표와 작은따옴표를 혼용해서는 안 됩니다.

2. 맞춤 매개변수가 쉼표(,)로 구분되지 않은 경우입니다. 예를 들면 다음과 같습니다.

<script type="text/javascript"> var google_tag_params = { flight_destid: "234" flight_pagetype: "purchase" flight_totalvalue: 120.99 }; </script>

올바른 예는 다음과 같습니다.

<script type="text/javascript"> var google_tag_params = { flight_destid: "234", flight_pagetype: "purchase", flight_totalvalue: 120.99 }; </script>

마지막 맞춤 매개변수 뒤에는 쉼표가 필요 없지만, 쉼표가 있어도 무방합니다.

3. 매개변수에 공백 또는 ASCII 문자 이외의 문자가 들어간 경우입니다 ([a-z][0-9], '_'만 지원됨). 예를 들면 다음과 같습니다.

<script type="text/javascript"> var google_tag_params = { flight_destid: "234", flight pagetype: "purchase", flight_totalvalue: 120.99 }; </script>

올바른 예는 다음과 같습니다.

<script type="text/javascript"> var google_tag_params = { flight_destid: 234, flight_pagetype: "purchase", flight_totalvalue: 120.99 }; </script>

4. 매개변수에 대괄호 없이 여러 값을 추가한 경우입니다. 예를 들면 다음과 같습니다.

<script type="text/javascript"> var google_tag_params = { flight_destid: "123,"234", flight_pagetype: "cart", flight_totalvalue: 100,50 }; </script>

올바른 예는 다음과 같습니다.

<script type="text/javascript"> var google_tag_params = { flight_destid: ["123","234"], flight_pagetype: "cart", flight_totalvalue: [100,50] }; </script>

5. 매개변수에 값을 추가하지 않은 경우입니다. 예를 들면 다음과 같습니다.

<script type="text/javascript"> var google_tag_params = { flight_destid: , flight_pagetype: "other", flight_totalvalue: }; </script>

올바른 예는 다음과 같습니다.

 

<script type="text/javascript"> var google_tag_params = { flight_destid: "0", flight_pagetype: "other", flight_totalvalue: 0 }; </script>

또는 아래와 같이 간단히 수정할 수도 있습니다.

<script type="text/javascript"> var google_tag_params = { flight_pagetype: "other" }; </script>

6. 맞춤 매개변수의 이름이 잘못 지정된 경우입니다. 예를 들면 다음과 같습니다.

<script type="text/javascript"> var google_tag_params = { destid: "234", pagetype: "purchase", totalvalue: 120.99 }; </script>

올바른 예는 다음과 같습니다.

<script type="text/javascript"> var google_tag_params = { flight_destid: "234", flight_pagetype: "purchase", flight_totalvalue: 120.99 }; </script>

자바스크립트 이외의 태그 사용하기

자바스크립트 태그는 구현 오류가 적게 발생하고 여러 가지 HTML 관련 문제를 해결해 주므로, 다른 이미지 태그보다는 자바스크립트 태그를 사용하는 것이 좋습니다. 자바스크립트가 아닌 이미지 태그는 이미지처럼 취급됩니다. 일부 웹 브라우저는 페이지 로드 시간을 단축하기 위해 이미지를 캐시하므로, 사용자가 나중에 다시 방문할 때가 아니라 웹사이트를 처음 방문할 때만 태그가 활성화됩니다. 자바스크립트 버전의 태그가 이 문제를 해결합니다.

태그에서 자바스크립트가 아닌 부분(이미지 태그)을 사용하고 싶거나 짧은 버전의 태그를 원하는 경우에는 이 안내를 따르세요. 이미지 태그에는 자바스크립트 라이브러리(conversion.js)가 필요하지 않으며, 이미지 로딩과 페이지 로딩이 동시에 실행됩니다.

Google 태그에서 자바스크립트가 아닌 부분을 맞춤설정해야 계속해서 값을 전송할 수 있습니다. 데이터를 직접 인코딩해야 합니다.

방금 생성한 태그를 살펴보겠습니다. 태그가 다음 예시처럼 표시됩니다.

<script type="text/javascript"> var google_tag_params = { flight_destid: "REPLACE_WITH_STRING_VALUE", flight_pagetype: "REPLACE_WITH_STRING_VALUE", flight_totalvalue: REPLACE_WITH_NUMBER_VALUE }; </script> <script type="text/javascript"> /* <![CDATA[ */ var google_conversion_id = XXXXXXXXXX; var google_custom_params = window.google_tag_params; var google_remarketing_only = true; /* ]]> */ </script> <script type="text/javascript" src="//googleadservices.com/pagead/conversion.js"> </script> <noscript> <div style="display:inline;"> <img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&amp;guid=ON&amp;script=0&amp;data.flight_destid=101&amp; data.flight_destid=102 &amp;data.flight_pagetype=purchase"/> </div> </noscript>

강조표시된 텍스트는 자바스크립트가 아닌 태그입니다. Google 태그를 통해 맞춤 매개변수를 전송하려면 다음 단계를 따르세요.

1. Google Ads로 전송하려는 맞춤 매개변수(키/값이라고도 부름)를 준비합니다. 키/값은 다음 형식으로 전송해야 합니다.

data.key1=val1&data.key2=val2&data.key2=val3...

예를 들어 flight_destid=100 및 flight_pagetype=purchase를 맞춤 매개변수로 전송하려면 다음과 같이 조정해야 합니다.

data.flight_destid=100&data.flight_pagetype=purchase

장바구니 페이지에 제품 또는 서비스 ID가 여러 개 있는 경우처럼 특정 키에 여러 값이 있는 경우, 각각의 값에 대해 data.flight_destid=를 추가합니다.

data.flight_destid=101&data.flight_destid=102&data.flight_pagetype=cart

2. 문자열을 매개변수로 픽셀의 URL에 추가한 후 &를 &로 HTML 인코딩합니다.

3. 변경 후 최종 img src 태그는 아래와 같습니다.

//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&guid=ON&script=0&data.flight_destid%3D101&data.flight_destid=102 &data.flight_pagetype=purchase

4. 사이트에 추가할 수 있는 최종 img 태그는 아래와 같습니다. 이 태그는 자바스크립트 버전의 태그와 같은 기능을 제공합니다.

<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXXXXXXXX/?value=0&amp;guid=ON&amp;script=0&amp;data=flight_destid%3D101%2C102 %3Bflight_pagetype%3Dpurchase"/>