FioriのコンセプトにUXは不可分と考えていますが、それは今のところデザインタイムに偏重していると私自身は考えています。デザインタイムはSplash/Buildなどのツールが提供され始め、スケッチレベルのコンセプト段階からユーザーを巻き込んだUX設計ができるようになっています。ですが、ランタイムやリリース前のUXテストツールはそれほど充実されていないように見えます。そこでGoogle Analyticsを利用することを考えたのが本記事を書くきっかけとなりました。
先行する記事として唯一Google Analytics Integration with SAPUI5 / Fioriがありましたが、Component.jsの書き方がWebIDEで開発した場合と異なっていたので、改めて動作検証して本記事を起こしました。本記事はWebIDEで開発しているのに対し、上述の先行記事はEclipse上で開発した場合についての記述となっているようです。Fioriアプリケーションの開発時のフォルダ構成はWebIDEとEclipseとで若干異なる点にご注意下さい。
一般的にGoogle Analyticsでは、トラッキングしたいHTMLのWebページに下記のトラッキングコードを貼り付けます。?で書かれた箇所については、ご自身で取得されたトラッキング IDをもとに適宜置き換えて下さい。トラッキングコードはGoogle Analytics上で自動生成されます。
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-????????-?', 'auto');
ga('send', 'pageview');
</script>
FioriアプリケーションはJavaScriptとXMLファイルとで構成され、HTMLが無いので、Google Analyticsの機能の呼び出しには一工夫必要となります。
上記のコードを書き換え、Component.jsに下記のように埋め込みます。<script></script>に挟まれた箇所をそのままコピーしてもエラーになるので、JavaScriptファイルに問題なく埋め込められるよう多少のコードの調整作業が必要ですが、多くの場合は下記をコピーしてトラッキングコードを適切に編集しなおせば問題ないでしょう。
sap.ui.define([ "sap/ui/core/UIComponent", "sap/ui/Device", "test/model/models" ], function(UIComponent, Device, models) { "use strict"; return UIComponent.extend("test.Component", { metadata: { manifest: "json" }, /** * The component is initialized by UI5 automatically during the startup of the app and calls the init method once. * @public * @override */ init: function() { (function(i,s,o,g,r,a,m) { i["GoogleAnalyticsObject"]=r; i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments);},i[r].l=1*new Date(); a=s.createElement(o),m=s.getElementsByTagName(o)[0]; a.async=1; a.src=g; m.parentNode.insertBefore(a,m); })(window,document,"script","https://www.google-analytics.com/analytics.js","ga"); window.ga('create', 'UA-????????-?', 'auto'); window.ga('send', 'pageview'); // call the base component's init function UIComponent.prototype.init.apply(this, arguments); // set the device model this.setModel(models.createDeviceModel(), "device"); } }); });こうすることにより、グローバルのWindowにJavaScriptの関数gaがオブジェクトとして定義され、サイトの各ページからGoogle Analyticsのページアクセス情報を記録することが出来るようになります。下図はChromeの開発者モードで、ページロード時点でgaが利用可能であることを確認した際のスクリーンショットです。
下記はこうしてFioriアプリケーションからアクセスした際のアクセス履歴の表示の一部となります。
注）ブログ機能の生HTMLコードの埋め込みがうまく動かないので、component.js参考ファイルも添付しておきます。
