Tuesday, April 16, 2019

Liferayのサイトにタグを埋め込む

こんにちは。おおたにです。

最近ではアクセス解析、Web接客、マーケティングオートメーション等々、より良いデジタルエクスペリエンスを提供するためのツールが一般的に利用されるようになり、これらのツールをWebサイトに組み込む機会も多くなっているかと思います。今回は、これらのツール組み込みに必要な、カスタムタグ(特にJavaScriptのスクリプト)をLiferayサイトに埋め込む方法について紹介したいと思います。

ページ毎に直接JavaScriptを埋め込む


まずはお手軽な方法から紹介します。

1. 以下のようにページの上部、「ページ設定」アイコンをクリックします。


2. 「詳細設定」をクリックして「ページの下に実行されるJavaScriptを貼り付ける」欄に埋め込むJavaScriptコードをコピーし、「保存」をクリックします。


以上でページへのJavaScript埋め込みは完了です。とてもお手軽!

特定のサイトの公開ページ/非公開ページ全部に一括で埋め込みたい場合は、画面上部の「メニュー」アイコン->「ページ作成設定」->「サイトページ」で「公開ページ」/「非公開ページ」のギアアイコンをクリックしてみましょう。先ほどの手順2.のような画面が表示され、公開ページ/非公開ページ一括で埋め込むことができます。


なお、この方法については以下の点にご注意ください。
  • ページ毎/サイト毎に設定する必要がある
  • JavaScriptしか埋め込めない
  • <body>タグにしか埋め込めない
少数のページに必要なJavaScriptを埋め込む場合にはとても役立ちますが、多数のページにタグを埋め込む場合には管理面で現実的ではない可能性があります。

全てのページにタグを埋め込む


ページ数が少ない/今後ページが増えることがない状況であれば、先ほど紹介した方法で対応できます。しかし、ページ数が多い/今後ページが増えていくという状況では、埋め込み作業に膨大な工数がかかったり、埋め込み忘れが発生したりということが考えられます。また、埋め込みたいタグがJavaScriptでない場合も先ほどの方法では対応できません。

そのような場合は、テーマ(Theme)を開発することで実現することができます。テーマとはWebサイトの見栄えを制御するLiferayの仕組みのことで、その中に必要なタグを埋め込むと、テーマが適用された全てのページにタグが自動的に埋め込まれます。

また、複数のタグを複数ページに埋め込む必要がある場合、一般的にはタグマネージャーが使われるかと思います。この場合はタグマネージャーのタグをテーマに埋め込む形になります。以下では、Google Tag Manager(以下GTM)を例に、カスタムテーマにGTMタグを埋め込むためのおおまかな手順を紹介します。

1. GTM公式ドキュメントを参考にGTMをセットアップします。
  •  セットアップが進むと、こちらのドキュメントにあるように<head>タグと<body>タグにそれぞれGTMタグを埋め込むように指示されます。
2. Liferayのテーマを開発します。まだテーマ開発を行っていない方は以下の記事/ドキュメントを参考にテーマを開発します。
  Liferay 7 / DXPでのテーマの作り方

3. タグを埋め込む先のファイル /src/templates/portal-normal.ftl をエディタ等で開きます。このファイルがWebサイトの<html><head><body>タグのひな型になっています。
  • もし上記ファイル存在しない場合は、一度テーマをビルドしてください。 /build/templates/portal_normal.ftl が生成されるので、このファイルを /src/templates フォルダにコピーします(/src 以下に templatesフォルダが無い場合は作成してください)。
4. GTMセットアップの指示に従い、<head>タグと<body>タグにそれぞれGTMタグを追加します。
埋め込みの一例(styledテーマへの埋め込み)

5. テーマをビルドし、生成されたwarファイルを<LIFERAY_HOME>/deploy フォルダにコピーすればデプロイ完了です。

6. 埋め込み対象のページ/サイトのテーマを先ほど作成したカスタムテーマに変更し、GTMタグが埋め込まれていることを確認します(ブラウザのデベロッパーツールでHTMLソースを確認し、"googletagmanager"等で検索すれば<script>タグ、<noscript>タグが埋め込まれていることを確認できるはず)。

以上でGTMタグの埋め込みは完了です。あとはGTM側でタグとトリガーを設定し、必要なページに必要なタグを配信するだけです。


今回の紹介内容は以上です。テーマ開発のハードルは若干高いですが、一度作ってしまえばググっとハードルが下がりますので、ぜひチャレンジしてみてください。

No comments:

Post a Comment