平衡点


2023/03/03

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

はじめに

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

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

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

AMP HTML での GA4

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

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

というわけで

  1. ga4.json を取得し, 適宜設置する:
    wget https://amp.analytics-debugger.com/ga4.json \
      -O path/to/public_html/
        
  2. <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 は極力 classdiv を指定せずに「それっぽく」作るという塩梅. 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>

とスッキリ. 元々 semantic に組んでくれているので, divspan がほとんど無い. せいぜいモバイル用に breakpoint を指定してハンバーガーメニューにする所だけだった.

というわけで, イロイロとスッキリ. とはいえ, 残念ながら Picocss が提供してくれた折角のダークモードとの切り替えは使えていない. amp-bindamp-scriptあたりでswitcher組めば良いかもしれない. ただ, その前にamp自体が過去のモンになりそうではある

_ Word の文書「中国語(台湾)で書かれた文字が…」 となる場合

某所文書のテンプレートを貰ったので作業していたら 「このドキュメントには中国語(台湾)で書かれた文字があるため、公正の対象にできませんが、この言語に対応する校正ツールを入手できる場合があります。」 とか言われたり(こういう事があるからWordは嫌いだ).

元の文書作成者の環境によるんだろうかねぇ.

「検索」で言語を置換すると良いみたい. 試してみたら確かに治った.

そういや, 少し前はこんな事もあったな.

…もうまともに開発リソースが割かれない様になってきたのかねぇ.


連絡先など
最近の日記
  • 2024/02/15
    • 1. org-mode → bemaer での番号付きリスト
  • 2024/01/04
    • 1. 明けました.
  • 2023/12/03
    • 1. TeX on Debian 12 (Bookworm)
  • 2023/11/29
    • 1. GPGで複数の認証鍵がある場合の --export-ssh-key
  • 2023/09/07
    • 1. Wanderlust で返信時にメーリングリストのシリアルナンバを削除するには
一覧
2006|03|04|05|06|07|08|09|10|11|12|
2007|01|02|03|04|05|06|07|08|09|10|11|12|
2008|01|02|03|04|05|06|07|08|09|10|11|12|
2009|01|02|03|04|05|06|07|08|09|10|11|12|
2010|01|02|03|04|05|06|07|08|09|10|11|12|
2011|01|02|03|04|05|06|07|08|09|10|11|12|
2012|02|03|04|08|09|10|11|12|
2013|01|02|03|04|05|06|08|09|10|11|12|
2014|01|02|04|05|06|07|08|09|10|11|12|
2015|01|02|03|04|05|06|07|09|10|
2016|02|03|
2017|01|02|03|05|06|07|09|11|12|
2018|03|06|07|10|11|12|
2019|01|02|03|04|05|07|10|12|
2020|01|02|03|04|05|08|09|10|11|12|
2021|01|02|03|05|06|07|08|09|11|12|
2022|01|02|03|04|05|06|08|10|11|12|
2023|02|03|04|06|08|09|11|12|
2024|01|02|
Back to Top ▲