4分

Claude Code Skill for GTM JavaScript — ES5コンパイルエラーを根絶する

claude-codegtmjavascriptanalytics

課題

Google Tag Managerを長年使ってきましたが、AIアシスタントにGTMのコードを書かせるたびに同じ問題が起きます。const、アロー関数、テンプレートリテラルを使ったコードが生成され、GTMがコンパイルエラーで弾くのです。

Error: This language feature is only supported for ECMASCRIPT_2015 mode or better: const declaration.

GTMのCustom HTMLタグはES5 JavaScriptのみ対応です。 これは目立つ場所にドキュメント化されておらず、多くの開発者が実際にハマって初めて気づきます。

毎回手動でES5に変換するのに疲れたので、この問題を根本的に解決するClaude Code Skillを作りました。

解決策

GitHub - claude-skill-gtm-javascript

このスキルはClaude CodeにGTMの制約を教えます：

機能ES6+（禁止）ES5（必須）
変数const, letvar
関数() => {}function() {}
文字列`${var}`'str' + var
分割代入{a, b} = objvar a = obj.a
for-offor (x of arr)for (var i...)

収録内容

スキルには4つのファイルが含まれています：

  • SKILL.md — ES5コード生成のコアルールとパターン
  • reference.md — ES6 → ES5変換の完全リファレンス
  • examples.md — dataLayer、ecommerce、consentの本番向けコード
  • checklist.md — GTMのテスト・デバッグガイド

2024-2025 アップデート対応

スキルには最新のGTM/GA4アップデートも含まれています：

  • IE11サポート終了（2024年7月15日）— IE11互換性は不要に
  • Consent Mode v2必須（2024年3月）— 新パラメータ ad_user_data, ad_personalization
  • Google Ads自動タグ（2025年4月10日）— コンテナがGoogleタグを最初に自動読み込み
  • GA4 Ecommerce — itemsアレイ付き完全なイベントスキーマ
  • Server-side GTM — 1stパーティドメインパターン

インストール

git clone https://github.com/ekusiadadus/claude-skill-gtm-javascript.git ~/.claude/skills/gtm-javascript

プロジェクト固有のインストール：

mkdir -p .claude/skills
cp -r skills/gtm-javascript .claude/skills/

例：GA4 Purchaseイベント

インストール後、Claude Codeは正しいES5コードを生成します：

ga4-purchase.js
(function() {
  'use strict';
 
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ ecommerce: null });
  window.dataLayer.push({
    event: 'purchase',
    ecommerce: {
      transaction_id: 'T_12345',
      value: 99.99,
      currency: 'USD',
      items: [{
        item_id: 'SKU_001',
        item_name: 'Product Name',
        price: 99.99,
        quantity: 1
      }]
    }
  });
})();

例：Consent Mode v2

consent-mode-v2.js
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
 
gtag('consent', 'default', {
  ad_storage: 'denied',
  ad_user_data: 'denied',
  ad_personalization: 'denied',
  analytics_storage: 'denied'
});

なぜこれが重要か

GTMはGoogle Closure Compilerでコードを処理しますが、Custom HTMLタグに対してはES5しかサポートしていません。この制限は何年も変わっておらず、今後も変わる見込みはありません。

GTMを扱うすべての開発者がこの問題に直面し、すべてのAIアシスタントがデフォルトでES6+コードを生成します。このスキルがそのギャップを埋めます。

フィードバック歓迎

GTMやClaude Code Skillを扱っている方からのフィードバックをお待ちしています：

  • 見落としているGTMパターンはありますか？
  • 同様の制約がある他のアナリティクスツールはありますか？
  • スキルをどう改善できますか？

GitHub Repository