レポートを埋め込むための要件を確認した後、どの Matomo レポートを埋め込むかを選択します。Matomoの右上のメニューから「Administration」をクリックし、「Platform > Widgets」をクリックします。このページでは、すべてのウィジェットがライブプレビュー付きで表示されます。ウィジェットをプレビューすると、プレビューの下に埋め込みコード（ここでは赤くハイライトされています）が表示されます：

埋め込むウィジェットを選択し、そのコードをコピーしたら、挿入したいウェブサイトに行き、コードを必要な場所に貼り付けるだけです。下の画像では、トップダウンロードレポートがWordPress CMSのページに挿入されています。

注：iframeのHTMLタグが貼り付けられているため、HTMLビューが選択されている：

保存をクリックすると、おなじみのMatomoインターフェースがサイトに埋め込まれます：

スクロールバーが表示されないようにする

iframe-resizerライブラリを使用することで、スクロールバーを削除することができます。iframeの高さは固定ではなくなります。代わりに、iframeの高さはiframeのコンテンツの高さに自動的に調整されます。つまり、iframeの縦スクロールバーは表示されません。この動作を有効にするには、iframe-resizerライブラリの指示に従うだけです：

• iframeにidを付けます（例えばmatomoframe）： <iframe id=「matomoframe」 …>のようにします。
• このHTMLスニペットを、iframeを埋め込むサイトに埋め込んでください： <script>iFrameResize({ log: true }, ‘#matomoframe’)</script>。

ウィジェットのカスタマイズ

ウィジェットの日付、ウェブサイトID、または初期表示（表、グラフチャート、ゴールメトリクスを示す表）をカスタマイズするには、埋め込みコードのURLでパラメータを編集できます：

• idSite– ウェブサイトID
• period– 日、週、月、年
• date– 日付YYYY-MM-DD)、日付範囲(YYYY-MM-DD,YYYY-MM-DD)、またはエイリアス(例、today)
• disableLink– 有効にすると、進化グラフをクリックするとMatomoのダッシュボードにリダイレクトされます。
• viewDataTable– はウィジェットの視覚化を定義し、次の値を持つことができます：
  • tableAllColumns
  • tableGoals
  • table
  • cloud
  • graphPie
  • graphVerticalBar
  • graphEvolution
• show_footer – レポートによっては、このパラメータを0に設定することでレポート・フッターを非表示にできます。

例えば、ウィジェットのデータをデフォルトで棒グラフとして表示するには、ウィジェットのURLで次のように設定します。

&viewDataTable=graphVerticalBar

Matomo ダッシュボードを HTML ページに埋め込む

単一のレポートを埋め込むだけでなく、Matomo ダッシュボード全体を埋め込むこともできます。Matomoの右上にあるAdministrationをクリックし、次に “Platform > Widgets “をクリックします。このページに、ダッシュボード全体を埋め込むためのリンクがあります。これは、Matomo を他のダッシュボードやアプリに統合したい場合に非常に便利です。

Matomoのフルアプリをどこにでも埋め込める

Matomoアプリケーション全体をIframe内に埋め込むこともできます。これを実現するには、設定ファイルを少し変更する必要があります。
iframeを許可するようにINIを設定すれば、Matomoアプリ全体をiframe内のHTMLページに直接埋め込むことができます。