게시를 사용하여 Google 애널리틱스 추가

일반 프런트 엔드 개발자의 경우 이것은 빠른 수정입니다. 머릿속에 스크립트를 추가하기만 하면 즐거운 시간을 보낼 수 있습니다. 그러나 게시를 사용하는 Swift 개발자라면 조금 다릅니다. 그래도 꽤 쉽습니다.

게시된 웹사이트를 사용할 준비가 되었지만 이제 Google 애널리틱스 또는 다른 애널리틱스 웹사이트를 사용하여 몇 가지 항목을 추적하고 싶습니까? 이 빠른 자습서가 도움이 될 것입니다!


프런트 엔드 경험이 있는 경우 이러한 스크립트가 어떻게 구성되는지 알고 있으므로 확실히 도움이 되고 쉬울 것입니다. 그러나 나 같은 사람(최초의 언어는 Swift)에게는 약간 혼란스러울 수 있습니다. 게시는 순식간에 웹 사이트를 만드는 데 도움이 되는 멋진 도구이며 표준 HTML 태그를 문제 없이 사용할 수 있습니다. 그러나 스크립트는 약간 다른 짐승이며 약간의 시행 착오가 필요했습니다.

추적 코드 받기

먼저 Google 애널리틱스에 등록하고 로그인할 때까지 모든 단계를 따라야 합니다. 이는 꽤 표준적인 절차이며 Google에는 이미 훌륭한 온보딩 프로세스가 있으므로 문제가 없을 것입니다. 그렇다면 [email protected]에서 알려주세요.

다음으로 분석을 사용하여 추적하려는 모든 HTML에 삽입되는 추적 코드를 가져와야 합니다. Google 대시보드 내의 관리자 메뉴로 이동한 다음 추적 정보 -> 추적 코드로 이동하면 됩니다.



해당 페이지에서 아래 스니펫과 비슷한 코드를 찾을 수 있습니다. 모든 것을 복사하고 Swifty를 얻자!

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-111111111-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-111111111-1');
</script> 

헤드 스크립트 추가

이제 우리는 재미있는 것들을 얻습니다! 노드에서 확장을 생성할 예정이므로 이 추적기를 여러 페이지에 추가하는 것이 앞으로 더 쉬워집니다.

따라서 테마 파일로 이동하거나 기본 Foundation 테마를 사용하는 경우 해당 테마로 이동하십시오. 어떤 경우이든 홈페이지 HTML을 생성하는 madeIndexHTML 함수를 찾을 수 있어야 합니다.

테마 확장의 상단 및 외부 근처에 다음 코드를 추가합니다.

public extension Node where Context == HTML.DocumentContext {

static func googleTrackerHead() -> Node {
    .head(
    .script(
    .src("https://www.googletagmanager.com/gtag/js?id=UA-111111111-1")),
    .script(
    """
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-111111111-1');
    """
    ))
}}
//
//
//
// public extension Theme { . . .

Google 애널리틱스에서 얻은 코드를 사용하여 위 코드의 문자열을 자신의 트래커 정보로 바꿉니다.

이제 일반적으로 Node+Extensions.swift 또는 유사한 것과 같은 별도의 Swift 파일에 확장 기능이 있어야 합니다. 그러나이를 위해 나는 그것을 확장 할 계획이 없기 때문에 동일한 테마 파일에 배치했으며 이것은 매우 구체적인 사용 사례입니다.

호출될 때마다 .head를 반환하는 함수를 만들었으므로 다음에는 호출하기만 하면 됩니다!


func makeIndexHTML(for index:... 내부에 현재 .head 아래에 새로 만든 함수를 추가합니다.

....
//.lang(context.site.language),
//.head(for: index, on: context.site, stylesheetPaths: stylePaths),
.googleTrackerHead(),
//.body(
....

편집하지 말아야 할 현재 코드를 주석 처리하여 새 기능을 배치할 위치를 확인할 수 있습니다.

기다리는 게임

이제 우리는 대기 게임을 합니다. 🕰 모든 작업을 올바르게 수행했다면 하루 정도 지나면 Google 애널리틱스에서 일부 정보를 얻기 시작해야 합니다.

스크립트를 받은 페이지에는 테스트 트래픽 보내기 버튼이 있고 일부 결과를 표시하는 데 약 30초가 걸린다고 나와 있지만 저에게는 훨씬 더 오래 걸렸습니다.



읽어주셔서 감사합니다, 당신은 사랑스러운 사람입니다! ♥️ 연결해볼까요?