メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。

外部サイトにCTA(レガシー)を埋め込む

更新日時 2023年 5月 22日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

Marketing Hub Professional, Enterprise
CMS Hub Professional, Enterprise
Marketing Hub Basic(旧製品)

HubSpotのレガシーCTAは、HubSpotのページでもHubSpot以外のページでも使用することができます。外部サイトでHubSpotのCTAを使用し、リードの獲得とコンバージョンにつなげましょう。

外部サイトにCTA(レガシー)を埋め込む前に、HubS potのトラッキングコードがページにインストールされていることを確認してください。

始める前に

外部サイトにCTA(レガシー)を追加する前に、以下の点にご注意ください: 

  • 外部ウェブサイトに埋め込まれたCTAは、CTAのコンテンツ、テキスト、または全般的なデザインに変更が加えられると、グローバルに自動更新されます。
  • コンテンツマネジメントシステム(CMS)の違いにより、サイトのHTMLコードにアクセスし、CTA(レガシー)コードを埋め込む手順が異なる場合があります。サイトのHTMLコードにアクセスしたり、外部コードを埋め込む方法がわからない場合は、この記事をウェブマスター、IT部門、または技術リソースにEメールで送信してください。
  • WordPressのサイトにCTAを埋め込む場合は、以下の点にご注意ください:

    • WordPressサイトにCTAを埋め込む場合、CTAをレスポンシブにするために、外部スタイルシート内に追加のCSS宣言を適用する必要がある場合があります。 
    • WordPressでCTAが機能しない、ライブページを表示したときに埋め込みコードが変更されているなどの問題がある場合、プラグインを使って CTAを挿入し、埋め込みコードがそのまま残るようにする必要があるかもしれません。
    • インラインJavaScriptを削除した最新版のGutenbergをお使いの場合は、Inline JS Block for Gutenbergプラグインを使用して、フォームやCTAをページに埋め込んでください。

外部サイトにCTA(レガシー)を埋め込む

外部サイトにボタンCTAを埋め込む場合: 

  • HubSpotアカウントで、Marketing > Lead Capture > CTAsに移動します。
  • 左上のドロップダウンメニューをクリックし、「CTAs(Legacy)」を選択します。
  • CTA(レガシー)ダッシュボードで、CTAにカーソルを合わせ、[アクション]をクリックします。 > コードを埋め込む。
  • ダイアログボックスで、[コピー]をクリックします。

 
  • 外部ウェブサイトのコンテンツ管理システム(CMS)に移動します。 
  • CTAの埋め込みコードをHubSpot以外のページのHTMLに貼り付け、CTAを表示させたい場所に貼り付けます。 
  • CTAをウェブページ上でプレビューして、本番時の見え方を確認する。
    • CTAが正しく表示されない場合は、コピーしたコードが外部のCMSで変更されていないことを確認します。
    • 画像CTAを使用している場合、画像CTAがレスポンシブであることを確認するために、追加のスタイリングを追加する必要がある場合があります。 
  • 完成したら、ページを公開します。

この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。