dpdp では、外部のチャットサービス等のスクリプトの埋め込みが可能です。
具体的な埋め込みの手順について以下に説明します。
埋め込み手順
❶ デザイン画面の上部ヘッダ、左上方にある設定アイコンをクリックします。
⚙
➋ 設定メニューから 「スクリプト」 のタブを開きます。
➌ スクリプトに名称を付け、外部のサービスで取得したスクリプトを貼り付けます。
挿入先は head か? body か?
と迷われる場合もあるかもしれませんが、それは各サービス側で指示されています。
たとえば、intercom では body に、gogoleアナリティクスなら head に挿入するよう書いてあります。サービス側でスクリプトコードをコピーしたところに、HTMLのどこどこに入れてくださいと指示が書いてあるはずですので、指示された場所に入れてください。
➍ 上記の設定後にページを公開すると、下図のように head または body にスクリプトが挿入されていることが確認できます。
注意事項
プレビュー画面でページ遷移の際、「読み込み中」と表示される場合、されない場合。
スクリプト設定では、全ページに共通して挿入するスクリプトと、ページ単位で追加で挿入するスクリプトを使い分けて設定できます。
ページ単位で追加で挿入するスクリプトを設定した場合、プレビューでページ遷移した際に「読込中」が表示されます。これは、元となるHTML(スクリプトを埋め込んだHTML)を再リクエストするためです。
全ページ共通だけなら、どのページに遷移しても、元となるHTMLは共通なのでページ遷移の際に「読込中」は表示されません。
▼ 具体的には、以下のパターンのページ遷移を行った際に「読み込み中」が表示されます。
・追加スクリプトがあるページ から 追加スクリプトがあるページ へ遷移する時
・追加スクリプトがあるページ から 追加スクリプトがないページ へ遷移する時
・追加スクリプトがないページ から 追加スクリプトがあるページ へ遷移する時
(いずれも元となるHTMLが変わる可能性がある時)
なお、この現象については公開後のサイトでは発生しません。
あくまでプレビュー画面のみの話ですから、心配することはありません。