平衡点

2023/03/03

_ AMP HTML ページでの Google Analytics 4 (GA4)

はじめに

少し前に, この日記も含めて AMP 対応(AMP ページのみを提供)する様にしています. アクセス解析に Google Analytics を利用しているのですが, AMP HTML では外部 Javascript の読み込みができず, そのままでは GA4 へ移行できません.

Support App + Web properties on Google Analytics (gtag) · Issue #24621 · ampproject/amphtml · GitHub

…こういうの見てると, Google は AMP 止めるんだろうなぁ, とか思ったりするわけですが.

本サイトの AMP 提供の停止とここまでの振り返り | blog.jxck.io

そのうち AMP は止めるとは思うけど, まあそれはそれとして.

AMP HTML での GA4

amphtml 本体がいまだに対応していない中, <amp-analytics> を使って AMP Valid かつ GA4 に対応する方法が開発されている.

How to track AMP Pages with Google Analytics 4 - David Vallejo

これは現状では「非公式」なので, ある時に動かなくなる可能性もあるわけだが, それでもありがたいことではある.

というわけで

ga4.json を取得し, 適宜設置する:

wget https://amp.analytics-debugger.com/ga4.json \
  -O path/to/public_html/

<amp-analytics> を適宜.

<amp-analytics data-block-on-consent
               type="googleanalytics"
               config="url_of_your_ga4.json"
               data-credentials="include"
		             data-block-on-consent>
  <script type="application/json">
    {
        "vars": {
            "GA4_MEASUREMENT_ID": "G-XXXXXXXXXX",
            "GA4_ENDPOINT_HOSTNAME": "www.google-analytics.com",
            "DEFAULT_PAGEVIEW_ENABLED": true,
            "GOOGLE_CONSENT_ENABLED": true,
            "WEBVITALS_TRACKING": false,
            "PERFORMANCE_TIMING_TRACKING": false
        }
    }
  </script>
</amp-analytics>

とりあえずはこんな塩梅で良いかな, とか.

GA4 への移行

とりあえずこの日記も AMP Valid だしデータ取得はできている模様.

AMP HTML を止めるかどうかは思案中. あまり派手な事をする気のない自分にとって「下手な事ができないフレームワーク」(ギブス?)として結構有用だった気もするんだよなぁ.

うーん.

[ツッコミを入れる]

2023/03/14

_ WebのCSSをbasscssからPico.cssに変更した

これまで Basscss で組んでいたサイトのCSSを Pico.css に変更した.

個人のサイトは AMP HTML のみで作成しているのでサイズが気になる所ではあるが:

basscss ベース: 24 kb(24142)
picocss ベース: 45 kb(45649)

というわけで, 許容範囲.

basscss は用途に応じたクラスが細かく用意されていて, HTML 側で必要に応じて class を追加していく感じだったけれども, Pico.css は極力 class や div を指定せずに「それっぽく」作るという塩梅. HTML がスッキリして嬉しい.

例えばサイトの上部ナビゲーション. basscss の場合, HTML は

<header class="container right-0 left-0 top-0 z4 fixed">
  <nav class="navigation flex items-center justify-between">
    <div class="pr1 py1 order-0">
      <a href="index.html">
        <amp-img layout="fixed"
                 width="1.2rem"
                 height="1.2rem"
                 src="/assets/img/top.webp"
                 alt="About"
                 id="top"
                 class="logo left">
          <amp-img fallback
                   layout="fixed"
                   width="1.2rem"
                   height="1.2rem"
                   src="/assets/img/top.jpg"
                   alt="About"
                   id="top"
                   class="logo left">
          </amp-img>
        </amp-img>
      </a>
    </div>
    <input type="checkbox" id="tm" class="navigation-input">
    <label for="tm" class="pl1 py1 order-3 md-hide lg-hide h2">☰</label>
    <div class="navcontents items-center md-flex lg-flex order-1">
      <div class="px1 py0">
        <a href="/research/index.html">
          Research
        </a>
        <div class="dmenu px1 py0">
          <input type="checkbox" id="dmenu" class="dmenu-input">
          <label for="dmenu">Software &#9662;</label>
          <div class="dcontents">
            <ul class="list-reset p0 m0">
              <li class="px1 py0">
                <a href="/software/index.html">
                  Repository
                </a>
              </li>
              <li class="px1 py0">
                <a href="/cc-env/index.html">
                  Comp. Memo
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="px1 py1">
          <a href="https://uwabami.junkhub.org/log">blog</a>
        </div>
      </div>
      <div class="flex-auto"></div>
      <div class="px1 py0 order-2">
        <form method="GET"
              class="p0 m0"
              action="https://www.google.com/cse"
              target="_top">
          <div class="inline-block relative p0 m0 small">
            <input name="cx" type="hidden"
                   value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"/>
            <input name="ie" type="hidden" value="UTF-8" />
            <input class="gsearch" type="search" placeholder="検索" name="q" required>
          </div>
        </form>
      </div>
    </div>
  </nav>
</header>

となっていて, ついでに dropdown メニューを組むのに結構苦労して dmenu, dcontents クラスを作成していた.

これが Pico.css の場合, HTML は

<header>
  <nav>
    <ul>
      <li>
        <a href="/index.html">
          <amp-img layout="fixed"
                   width="1.2rem"
                   height="1.2rem"
                   src="/assets/img/top.webp"
                   alt="About"
                   id="top">
            <amp-img fallback
                     layout="fixed"
                     width="1.2rem"
                     height="1.2rem"
                     src="/assets/img/top.jpg"
                     alt="About"
                     id="top">
            </amp-img>
          </amp-img>
        </a>
      </li>
    </ul>
    <input class="menu-btn" type="checkbox" id="menu-btn"/>
    <label class="menu-icon" for="menu-btn"><span></span></label>
    <ul class="menu">
      <li>
        <a href="/research/index.html">
          Research
        </a>
      </li>
      <li>
        <details role="list">
          <summary aria-haspopup="listbox" role="link">Software</summary>
          <ul>
            <li>
              <a href="/software/index.html">
                Repository
              </a>
            </li>
            <li>
              <a href="/cc-env/index.html">
                Comp. Memo
              </a>
            </li>
          </ul>
        </details>
      </li>
      <li>
        <a href="https://uwabami.junkhub.org/log">blog</a>
      </li>
      <li>
        <form method="GET"
              action="https://www.google.com/cse"
              target="_top">
          <input name="cx" type="hidden"
                 value="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"/>
          <input name="ie" type="hidden" value="UTF-8" />
          <input type="search" placeholder="検索" name="q" required>
        </form>
      </li>
    </ul>
  </nav>
</header>