はじめに
SharePoint Online(SPO)
にGA4を導入する必要があり、SharePoint Framework（SPFx）を使ってどうにかした話を書きます。
裏テーマは、最新情報を確認して裏取りするのが大事……という話です。
SPOはJavaScriptの埋め込みに対応していない
（見出しでネタバレしていますが）まずはSPOにGA4を埋め込む方法を素直に検索してみました。
2024年12月現在「SharePoint Online GA4 埋め込み」等で検索すると、それっぽい記事が出てきます。
また、Copilotに問い合わせてもそれっぽい手順が出てきます。
しかし、公式ドキュメントを参照すると以下の記述が出てきます。
この拡張オプションは、従来の SharePoint エクスペリエンスにのみ使用できます。 コミュニケーション サイトのような、SharePoint Online の最新エクスペリエンスではこのオプションを使用できません。
Googleの公式ドキュメントにあるように、GA4導入にあたり、Google タグの JavaScript スニペットを導入対象のWebサイトの各ページに埋め込む必要があります。
しかし、SPOではJavaScriptの埋め込みには対応していないようです……。
公式ドキュメントの確認大切ですね……。
そのほかに調べた（けど駄目だった）方法
（またも見出しでネタバレしていますが）UserCustomActionを使った埋め込みや埋め込みwebパーツSharePointスペースにコンテンツを追加等も調べました。
UserCustomActionを使ってJavaScriptを埋め込む
UserCustomActionを使用してJavaScriptを埋め込めるという記事を見かけ、調べてみました。
しかし、下記にある通り、UserCustomActionを使ったカスタマイズも現在のSPOでは使用できなくなっているようです。
SharePoint Server 2019と SharePoint Online の現在の "モダン" UI では、これらのカスタマイズのほとんどは使用できなくなりました。 幸いなことに、SharePoint Framework拡張機能では、"モダン" UI で同様の機能を提供できます。
埋め込みwebパーツSharePointスペースにコンテンツを追加
コード埋め込み機能を利用してJavaScriptが埋め込めないか確認しました。
しかし、埋め込みコードはiframeのみサポートしており、JavaScriptの埋め込みには使えませんでした。
SPFxを使ってGA4タグを埋め込もう
最終的にSPFxを使用することでSPOにGA4タグを埋め込みました。
下記ページに以下の記載がある通り、現在ではSharePointのカスタマイズにはSPFxが推奨されているようです。
SPFx は、開発者に推奨される SharePoint のカスタマイズおよび拡張モデルです。
今回はSPFxのチュートリアルを見ながら拡張機能を構築し、一部GA4タグ埋め込み用に拡張機能をカスタマイズするという方法を取りました。
参照した公式ドキュメントは下記です。
SPFx開発環境の設定
下記ドキュメントを参照しながら、インストール作業を行います。
拡張機能の作成
ドキュメントを参考にYaomanジェネレータを実行し、ソリューションを作成します。
次のような画面が表示されれば、ソリューションの作成に成功しています。
GA4タグ埋め込み用に拡張機能をカスタマイズ
下記を参照しつつ、GA4のタグを埋め込めるように拡張機能をカスタマイズしていきます。
react-ga4のインストール
GA4導入のためreact-ga4をインストールします。
npm install react-ga4 --save
ApplicationCustomizerの編集
下記ファイルを開きます。
src/extensions/{your Application Custmizer name}/{your Application Custmizer name}ApplicationCustmizer.ts
react-ga4をimportし、測定IDを埋め込みます。
// npm installしたreact-ga4をimportする
import ReactGA from 'react-ga4';
// 中略
export default class AddGa4TagApplicationCustomizer
extends BaseApplicationCustomizer<IAddGa4TagApplicationCustomizerProperties> {
public onInit(): Promise<void> {
Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
// onInit内の処理を書き換える
// Googleアナリティクスのページから取得した測定IDを埋め込む
ReactGA.initialize('G-XXXXXXXXXX');
ReactGA.send({
hitType: 'pageview',
page: location.pathname + location.search
});
return Promise.resolve();
}
}
拡張機能の展開、CDNからホスト
この辺は手順のカスタマイズがないので、チュートリアルを見ながら進めます。
おわりに
今回はSPOにGA4を導入する方法の調査を行いました。
クラシック版のSharePointではJavaScriptがそのまま埋め込めていたため、従来の手順を記載した記事が数多くヒットしました。
調査を通して、クラウドサービスの変化の速さ、かつてできていたことが現在は別の手段を使わないと実現できなくなっているということが多々あるのを実感しました。
実際に手を動かして、できるできないを検証するのが大切ですね。