Squarespace 도움말 페이지에 따르면, 헤더 삽입 필드에 입력한 코드는 head 요소 안에 "사이트의 모든 페이지에" 배치됩니다.1 Ghost 도움말 페이지는 Site Header에 추가한 스크립트가 "사이트의 모든 페이지 하나하나에 나타난다"고 말합니다.2 Webflow 페이지는 Head code 섹션의 코드가 "사이트 전체에 적용된다"고 말합니다.3 각 업체는 퍼블리셔가 가장 먼저 묻는 질문, 즉 스크립트를 어디에 넣어야 모든 곳에서 실행되는지에 한 문장으로 답합니다. WordPress는 같은 질문에 두 곳으로 답합니다. WordPress 테마는 블록으로도, 코드로도 만들 수 있기 때문입니다.
각 호스팅 플랫폼은 사이트 전체용 필드를 기술 수준이 아니라 요금제로 제한합니다
Squarespace에서 이 필드는 코드 삽입(Code Injection) 패널의 헤더 상자입니다.1 같은 페이지는 코드 삽입이 "Core, Plus, Advanced 및 일부 레거시 요금제에서 사용할 수 있다"고 말합니다.1 Ghost는 이 기능을 Settings, Advanced, Code Injection 순으로 들어가는 곳에 두며, head용 Site Header 상자와 body 끝부분용 Site Footer 상자가 있습니다.2 Webflow는 이 기능을 Site settings의 Custom code 탭에 두며, Head code와 Footer code 섹션은 각각 최대 50,000자까지 입력할 수 있습니다.3 Webflow 페이지는 사용자 정의 코드에 Core, Growth, Agency, Freelancer 워크스페이스 또는 활성 Site 요금제가 있는 사이트가 필요하다고 덧붙입니다.3
호스팅 플랫폼에서 장애물이 있다면, 그것은 코드가 아니라 요금제입니다. 이 필드가 포함된 요금제의 퍼블리셔는 템플릿을 열지 않고도 스크립트 요소를 붙여 넣을 수 있습니다. 이 필드가 빠진 요금제의 퍼블리셔는 그럴 수 없습니다.
WordPress는 두 곳을 안내하며, 첫 번째 방법이 통하는지는 계정의 역할이 결정합니다
WordPress 자체 문서는 사이트 편집기(Site Editor)를 "머리글, 바닥글, 그리고 그 사이의 모든 것을 포함한 사이트 전체를 블록으로" 디자인하는 도구로 설명합니다.4 같은 페이지는 사이트 편집기가 블록 테마가 활성화되어 있을 때에만 사용할 수 있다고 말하며, 템플릿 파트를 "사이트에서 반복되는 전역 영역을 관리하기 위한" 블록으로 정의합니다.4 바닥글 템플릿 파트에 넣은 사용자 정의 HTML(Custom HTML) 블록은 그 파트가 쓰이는 모든 곳에 나타납니다. 블록 자체는 블록 삽입기에서 추가하거나, 새 단락 블록에 /html을 입력해 추가합니다.5
Custom HTML 페이지에는 붙여 넣은 스크립트가 유지될지를 결정하는 세부 사항이 있습니다. WordPress 7.0부터 이 블록에는 HTML, CSS, JavaScript용 패널이 따로 있으며, CSS와 JavaScript 패널은 "unfiltered_html 권한이 있는 사용자만 사용할 수 있습니다."5 이 권한이 없는 사용자(페이지의 예시는 기여자(Contributor)입니다)의 경우, WordPress는 wp_kses로 블록을 정리하며 허용되지 않은 태그를 제거하는데, script 태그도 그중 하나입니다.5 따라서 붙여 넣는 계정의 역할도 설정의 일부입니다.
남은 한 곳은 테마 자체의 코드입니다. 테마 핸드북은 테마와 플러그인이 스크립트를 "표준 WordPress 방식", 즉 wp_enqueue_scripts 액션에서 호출되는 enqueue 함수로 로드해야 한다고 말합니다.6 같은 페이지는 함수 인자에 'strategy' => 'defer' 키를 넣어 스크립트를 지연 로드하는 예를 보여 주며, 그 옆에 'async' 옵션도 있습니다.6 WordPress용 AdBubbles 플러그인이 계획되어 있으며, 플러그인이 나오기 전까지는 이 두 곳이 WordPress가 안내하는 위치입니다.
어느 필드에 넣느냐보다 스크립트가 어떻게 로드되느냐가 더 중요합니다
HTML 표준은 일반 스크립트 요소의 세 가지 동작을 설명합니다. defer 속성도 async 속성도 없는 스크립트는 표준의 표현으로 "즉시 가져와 평가되며, 둘 다 완료될 때까지 파싱을 차단합니다."7 defer가 있으면 스크립트는 "병렬로 가져오고 페이지 파싱이 끝났을 때 평가됩니다."7 async 스크립트는 병렬로 가져오며 "사용할 수 있게 되는 즉시(파싱이 완료되기 전일 수도 있음) 평가됩니다."7 필드는 브라우저가 어디에서 그 요소에 도달하는지를 정하고, 속성은 브라우저가 거기서 무엇을 하는지를 정합니다.
임베드 adbubbles.js는 의존성 없는 순수 JavaScript로 작성된 정적 파일 하나로, Cloudflare의 캐시를 통해 제공되며, 페이지의 DOM이 준비된 후에 로드됩니다. 퍼블리셔 계정을 여는 데는 비용이 들지 않으며, 임베드도 마찬가지입니다. 사이트를 추가한 퍼블리셔는 무엇이든 붙여 넣기 전에, 사이트의 어떤 단어가 현재 판매 가능한지 보여 주는 크롤링을 요청할 수 있습니다. 설치 페이지에는 붙여 넣을 정확한 스크립트 요소가 나와 있습니다.
범위는 생각이 필요한 결정입니다
스크립트가 모든 페이지에 들어가고 나면, 어떤 업체의 도움말 페이지도 대신 내려 줄 수 없는 결정이 하나 남습니다. 범위는 임베드가 검사할 수 있는 페이지 영역으로, 예를 들면 article 요소나 entry-content 컨테이너입니다. 범위 안에서도 임베드는 제목, 링크, 코드, 서식이 지정된 텍스트, 양식 컨트롤, 내비게이션, 머리글, 바닥글, 그리고 퍼블리셔가 data-noads로 표시한 모든 요소를 건드리지 않습니다. 구매된 각 단어가 처음 나오는 곳에 밑줄을 긋습니다. 단어당 버블은 하나가 한도이며, 두 버블이 한 단락에 함께 있는 일은 없습니다.
어떤 WordPress 테마가 각 게시물을 entry-content 클래스가 있는 컨테이너로 감싸고, 사이드바에 짧은 저자 소개를 보여 준다고 가정해 봅시다. 범위를 entry-content로 정하면, 저자 소개는 페이지에 있고 구매된 단어를 포함할 수 있어도 검사되지 않습니다. 범위를 main 요소 전체로 정하면 저자 소개도 검사되며, 버블이 글이 아니라 그곳에서 열릴 수도 있습니다. 어느 쪽도 틀린 선택은 아니지만, 판매하는 단어가 달라집니다.
계정에는 범위 외에도 페이지당 최대 버블 수, 제외할 광고주 카테고리, 사이트 인증이 있습니다. 인증은 DNS TXT 레코드, 메타 태그, 업로드한 파일 세 가지 중 하나로 합니다. Ghost 페이지는 Site Header 필드의 용도 중 하나로 메타 태그를 꼽으므로, 스크립트를 넣는 필드에 태그도 넣을 수 있습니다.2 DNS를 관리하는 퍼블리셔는 대신 레코드를 추가할 수 있습니다.
버블의 링크는 검색 엔진용 표시가 붙으며, 독자는 추적되지 않습니다
버블 안의 모든 링크에는 rel="sponsored noopener"가 붙습니다. Google 검색 센터는 "광고이거나 유료 게재인 링크"를 sponsored 값으로 표시하라고 하며, 공백으로 구분한 목록 하나에 여러 rel 값을 넣는 것을 허용합니다.8 임베드가 속성이 들어간 상태로 링크를 렌더링하므로 퍼블리셔는 아무것도 추가하지 않습니다. 버블은 Shadow DOM 안에서 렌더링되므로, 사이트의 CSS와 버블의 CSS는 서로 영향을 주지 않습니다.
페이지를 떠나는 것은 세 가지 비컨입니다. 페이지 로드마다 조회 1회, 버블이 1초 동안 표시되었을 때 열람 1회, 링크를 따라갔을 때 클릭 1회입니다. AdBubbles는 쿠키를 설정하지 않고, 식별자를 저장하지 않으며, 독자의 개인정보를 수집하지 않습니다. 일치는 페이지의 단어와 그 단어를 구매한 광고주 사이에서 이루어집니다. 저희는 어떤 독자가 버블을 볼지 고르지 않고, 페이지나 사이트 사이에서 독자를 따라다니지 않으며, 결과를 약속하지 않습니다.
템플릿이 여러 개인 사이트에서 실질적으로 중요한 점은 사이트 전체용 필드와 페이지 수준 필드의 차이입니다. Squarespace, Ghost, Webflow는 모두 모든 페이지에 적용되는 필드를 하나씩 두고 있으며, Webflow는 코드가 "해당 페이지에만 적용되는" 필드도 제공합니다.3 퍼블리셔는 독자가 버블의 링크를 따라갈 때 수익을 얻으며, 버블은 임베드가 실행된 곳에서만 열릴 수 있습니다. 페이지 수준 필드에 붙여 넣은 스크립트는 그 한 페이지에서만 버블을 만들 수 있으며, 임베드를 모든 페이지에 넣는 것은 사이트 전체용 필드입니다.