最近、ECサイトにちょっとした機能を追加したくて色々調べているんですが・・・
予期せぬエラーが怖いので、元のソースにはあまり触れたくないというジレンマ。
で、何かいい方法ないかなぁとChat GPTに相談していたら、
Googleタグマネージャー（GTM） という存在を教えてもらいました。
どうやら、
<head>タグにGTMで発行したタグ（スクリプト）を入れるだけで、
HTMLとかCSSとかJavaScriptを“後付け”できるらしい。
これなら、タグを挿入する以外で直接ファイルを触る必要がなく理想的です！
ということで、まだ全部を理解しているわけではないですが、
自分用のメモも兼ねて、現時点で分かったことだけまとめておきます。
目次
GTMのざっくり機能
- HTMLコードを追加して、ポップアップやバナーなどの要素を追加できる
- CSSコードを追加して、デザインやレイアウトを調整できる
- JavaScriptコードを追加して、クリックイベントなどを実装できる
- 追加したコードはページ毎に適用・不適用を選択できる
- 追加したコードは ON / OFF でき、不具合が出た場合などに機能を停止できる
ざっくり言うと、
ソースを触りたくない人のための、外付けコード置き場
みたいなイメージですね。
GTMの導入手順
- GoogleアカウントでGTM（Google Tag Manager）に登録
- 「コンテナ」を作る（サイト名・ドメインを入力するのみ）
- 作成すると、<head>と<body>に貼るコードが発行される
- その2つのコードを、サイトのテンプレートにコピペ
- GTMの管理画面で「タグ」を作って、HTML / CSS / JS を記述
- どのページやアクションで動かすかの「トリガー」を設定
- 「プレビュー」で動作チェック
- 問題なければ「公開」ボタンで反映
なるほど、結構シンプル
ということで、次回は実際に触って機能を確かめたいと思います！