Jamstack 사이트를 사용하여 서버측 분석

Jamstack 웹 사이트에는 백엔드가 없습니다.이로 인해 그들의 수집 분석 능력은 특히 차단기의 공격을 받기 쉽다.우리가 이 문제를 해결합시다.
이 예에는 Google Analytics에 이벤트를 보내는 규칙 Netlify Function 과 규칙 Netlify Redirect 이 포함됩니다.

문제.

Trackers와 Tracking Pixel은 HTML 코드로 사용자가 사이트를 방문하거나 이메일을 열 때의 행동이나 방문을 포착하는 데 사용된다.그것은 사이트의 사용 상황을 추적하는 데 매우 유용하고 때로는 사이트의 전환 상황을 추적할 수도 있다.
문제는 일부 추적기는 속도가 느리고 침입성이 있다는 점이다.광고 차단기는 처음에는 광고와 추적이 웹 성능을 떨어뜨리는 픽셀을 막거나 사용자 체험을 개선하기 위한 것이었으나 나중에 사용자의 프라이버시를 개선하는 것으로 확대되었다.
하나의 부작용은 많은 사이트 소유자들이 그들의 사이트에서 어떤 유용하고 어떤 유용하지 않은지에 대해 가시성을 잃었다는 것이다.물리적 추적 특징은 등록 링크에 글의 식별자를 추가하여 등록의 출처를 보는 등 일부 지표를 추적하는 데 사용될 수 있다.
이것은 여전히 우리가 우리의 내용이 조회되었는지 정확하게 확인하는 데 도움을 주지 못한다. 이것은 전환을 결정하는 관건적인 요구이다.

솔루션

서버 측 분석은 이미 사용자 활동을 추적하는 유행 방식이 되었다.그것은 전통적인 분석의 범위가 없지만, 예를 들어 독특한 페이지 보기와 같은 중요한 세부 사항을 포착할 수 있다.
위탁 관리 플랫폼(예를 들어Netlify이나 가장자리 공급자(예를 들어Cloudflare와Fastly)는 서버 측 분석을 해결 방안의 일부로 제공한다.그러나 공급업체를 사용하여 분석을 할 때, 사용자는 일반적으로 이러한 정보를 어떻게 저장하는지에 대해 제한을 받아 내부 보고를 제한한다.
이 때문에 일부 사람들은 자신의 서버 측 분석을 내놓는 것을 좋아한다.이를 위해 구글은 일부 언어에 빠른 입문을 제공했고, 다른 언어는 universal-analytics 등 소프트웨어 패키지를 제공했다.
여기서 우리는 universal-analytics와 Netlify 함수를 사용하여 우리의 기능을 실현할 것이다.

Netlify 함수

Netlify 함수는 기본적으로 AWS Lambda 함수이며 AWS는 없습니다.AWS 개발자 체험은 아직도 개선해야 할 점이 많은데 Netlify는 사용자 체험을 비즈니스 모델로 전환시켰다.Netlify 함수도 예외가 아닙니다. 자바스크립트를 작성하거나 설정된 디렉터리로 이동해서 몇 단계에서 발표할 수 있습니다.포트는 파일이나 폴더 이름으로 파생되며, 부모 프로그램의 의존항을 사용할 수도 있고, 스스로 책임을 질 수도 있습니다.
매우 간단한 함수는 다음과 같습니다.

// functions/hello-world/index.js

exports.handler = (event, context) => {
  console.log('Only the server will see this!')

  return {
    statusCode: 200,
    body: 'Hello, world!',
  }
}

배포되면 다음 URL을 통해 액세스할 수 있습니다.https://your-app.netlify.app/.netlify/functions/hello-world그러나 너도 회답 후에 몇 가지 일을 계속할 수 있다. 예를 들면:

// functions/hello-world/index.js

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    body: 'Hello, world!',
  })

  console.log('The server will still see this!')
}

이제 우리는 이 기능을 이용해 우리의 분석을 구글에 보낼 수 있다.

Note: If you're adding dependencies to a function, you'll need to add the @netlify/plugin-functions-install-core plugin to your netlify.toml configuration. This plugin will ensure all the function's dependencies are installed when the function is deployed.

먼저 설치universal-analytics가 필요하므로 다음 명령을 실행하기 전에 함수 디렉터리에 있는지 확인하십시오.

npm install universal-analytics

구글 분석 ID가 있는지 확인하고 Netlify Environment Variables 에 추가하십시오.
이제 우리는 함수에서 그것을 사용할 수 있다.

// functions/hello-world/index.js

const ua = require('universal-analytics')
const visitor = ua(process.env.GOOGLE_ANALYTICS_ID)

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    body: 'Hello, world!',
  })

  const { queryStringParameters: data } = event

  try {
    if (data) {
      visitor.pageview(data).send()
    }
  } catch (error) {
    console.log(error) // eslint-disable-line
  }
}

현재, 당신의 브라우저에서 URL에서 구글로 데이터를 직접 보낼 수 있습니다: https://your-app.netlify.app/.netlify/functions/hello-world?dp=/my-custom-page다음 매개변수에 국한되지 않고 전송할 수 있는 데이터는 다음과 같습니다.

{
  dp, // path e.g. /my-custom-page
  dt, // title of the page
  dh, // hostname e.g. https://netlify.com
  dr, // referrer e.g. https://netlify.com/as-a-referrer or /a-link
  ua, // user agent e.g. very obscure string meaning "chrome on mac"
  cs, // utm_source
  cm, // utm_medium
  cn, // utm_campaign
  ck, // utm_term
  cc, // utm_content
}

이것은 전화번호full list of acceptable parameters입니다.

이미지 추가

많은 경우, 이 스크립트를 단독으로 호출하여 공유기 중간부품이나 AJAX 요청 같은 것을 사용하면 떳떳한 보고를 할 수 있지만, 브라우저나 브라우저 광고 차단기는 이를 XHR 요청으로 식별하고 막을 수 있다.
내가 사용하기로 결정한 해결 방안은 픽셀을 추적하는 방법과 유사하다.지금까지 우리는 구조적인 광고 차단을 완전히 소홀히 했기 때문이다.

Netlify 함수에서 SVG 이미지를 반환하고 이미지 레이블을 사용하여 페이지에 배치합니다.
이 그림을 사용합니다.

이 이미지의 소스는 다음과 같습니다.

<svg id="svg1923" width="733" xmlns="http://www.w3.org/2000/svg" height="733">
<circle cy="366.5" cx="366.5" r="366.5"/>
<circle cy="366.5" cx="366.5" r="336.5" fill="#fede58"/>
<path d="m325 665c-121-21-194-115-212-233v-8l-25-1-1-18h481c6 13 10 27 13 41 13 94-38 146-114 193-45 23-93 29-142 26z"/>
<path d="m372 647c52-6 98-28 138-62 28-25 46-56 51-87 4-20 1-57-5-70l-423-1c-2 56 39 118 74 157 31 34 72 54 116 63 11 2 38 2 49 0z" fill="#871945"/>
<path d="m76 342c-13-26-13-57-9-85 6-27 18-52 35-68 21-20 50-23 77-18 15 4 28 12 39 23 18 17 30 40 36 67 4 20 4 41 0 60l-6 21z"/>
<path d="m234 323c5-6 6-40 2-58-3-16-4-16-10-10-14 14-38 14-52 0-15-18-12-41 6-55 3-3 5-5 5-6-1-4-22-8-34-7-42 4-57.6 40-66.2 77-3 17-1 53 4 59h145.2z" fill="#fff"/>
<path d="m378 343c-2-3-6-20-7-29-5-28-1-57 11-83 15-30 41-52 72-60 29-7 57 0 82 15 26 17 45 49 50 82 2 12 2 33 0 45-1 10-5 26-8 30z"/>
<path d="m565 324c4-5 5-34 4-50-2-14-6-24-8-24-1 0-3 2-6 5-17 17-47 13-58-9-7-16-4-31 8-43 4-4 7-8 7-9 0 0-4-2-8-3-51-17-105 20-115 80-3 15 0 43 3 53z" fill="#fff"/>
<path d="m504 590s-46 40-105 53c-66 15-114-7-114-7s14-76 93-95c76-18 126 49 126 49z" fill="#f9bedd"/>
</svg>

이제 함수에서 이미지를 반환합니다.

// functions/hello-world/index.js

const ua = require('universal-analytics')
const visitor = ua(process.env.GOOGLE_ANALYTICS_ID)

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    headers: {
      'Content-Type': 'image/svg+xml',
    },
    body: `<svg id="svg1923" width="733" xmlns="http://www.w3.org/2000/svg" height="733">
<circle cy="366.5" cx="366.5" r="366.5"/>
<circle cy="366.5" cx="366.5" r="336.5" fill="#fede58"/>
<path d="m325 665c-121-21-194-115-212-233v-8l-25-1-1-18h481c6 13 10 27 13 41 13 94-38 146-114 193-45 23-93 29-142 26z"/>
<path d="m372 647c52-6 98-28 138-62 28-25 46-56 51-87 4-20 1-57-5-70l-423-1c-2 56 39 118 74 157 31 34 72 54 116 63 11 2 38 2 49 0z" fill="#871945"/>
<path d="m76 342c-13-26-13-57-9-85 6-27 18-52 35-68 21-20 50-23 77-18 15 4 28 12 39 23 18 17 30 40 36 67 4 20 4 41 0 60l-6 21z"/>
<path d="m234 323c5-6 6-40 2-58-3-16-4-16-10-10-14 14-38 14-52 0-15-18-12-41 6-55 3-3 5-5 5-6-1-4-22-8-34-7-42 4-57.6 40-66.2 77-3 17-1 53 4 59h145.2z" fill="#fff"/>
<path d="m378 343c-2-3-6-20-7-29-5-28-1-57 11-83 15-30 41-52 72-60 29-7 57 0 82 15 26 17 45 49 50 82 2 12 2 33 0 45-1 10-5 26-8 30z"/>
<path d="m565 324c4-5 5-34 4-50-2-14-6-24-8-24-1 0-3 2-6 5-17 17-47 13-58-9-7-16-4-31 8-43 4-4 7-8 7-9 0 0-4-2-8-3-51-17-105 20-115 80-3 15 0 43 3 53z" fill="#fff"/>
<path d="m504 590s-46 40-105 53c-66 15-114-7-114-7s14-76 93-95c76-18 126 49 126 49z" fill="#f9bedd"/>
</svg>`,
  })

  const { queryStringParameters: data } = event

  try {
    if (data) {
      visitor.pageview(data).send()
    }
  } catch (error) {
    console.log(error) // eslint-disable-line
  }
}

이전에 사용한 URL을 사용하여 웹 사이트에 추가하려면 다음과 같이 하십시오.

<img 
  alt="An SVG file of a very smiley Emoji"
  title="An SVG Emoji"
  width="128" 
  src="/.netlify/functions/hello-world?dp=/my-custom-page"
/>

만약 운이 좋다면 그것은 이렇게 될 것이다.

리디렉션 규칙

그래서 나의 사악한 계획 생각 중 가장 교활한 발명 부분은 아마도 다음일 것이다.나는 광고 차단자가 비영상 URL을 느낄 수도 있고, 검색 문자열 파라미터가 이미지 원본과 같이 의심스러우며, 어떻게 해서든 그것을 막을 수도 있다고 생각했다.
입력Netlify Redirects.
프로젝트 루트 디렉터리 netlify.toml 를 사용하면 한 경로로 다른 경로를 에이전트할 수 있습니다.

[[redirects]]
  from = "/images/smiley-face.svg"
  to = "/.netlify/functions/hello-world"
  status = 200
  force = true

이제 웃는 얼굴을 포함하는 그림 경로를 사용할 수 있습니다.

<img 
  alt="An SVG file of a very smiley Emoji"
  title="An SVG Emoji"
  width="128" 
  src="/images/smiley-face.svg?dp=/my-custom-page"
/>

검색 문자열을 원하는 대로 인코딩할 수 있습니다. 함수 내부에서 인코딩하는 것만 기억하면 됩니다.

결론

분석은 마케팅과 콘텐츠 창작자의 슈퍼파워다.그것은 우리로 하여금 지역 사회를 위해 더욱 잘 봉사하고 우리가 수집할 수 있는 데이터에 따라 우리의 목표를 조정할 수 있게 한다.
추적기는 자주 프라이버시와 속도 문제에 관련된다.하지만 내가 믿는 대로 성실하게 행동하면 관객과 다른 사람들에게 좋은 점을 분석할 수 있다.
이것은 서버 측 분석을 실현하기 위한 아주 좋은 작은 방법입니다. 서버 측이 사용할 수 없을 때.