コード挿入を使用する

注: 最もアクセスの多いガイドはスペイン語に翻訳されていますが、一部のガイドは英語版のみ利用可能です。

コード挿入を使用する

最終更新日 2024年04月26日 15:19

サイトのページにカスタムHTMLまたはスクリプトを挿入します。

コード挿入を使用して、サイトの特定の部分を強化するHTMLとスクリプトを追加できます。これには、ライブチャットサービス、カスタムメールサービスのドメイン認証、またはサイト分析などが含まれます。

コード挿入は、コンテンツやスタイルの追加を目的としたものではありません。サイトにコンテンツを追加する方法については、「ページとコンテンツの基本」をご覧ください。スタイルのカスタムCSSを追加するには、カスタムCSSエディターを使用します。

コード挿入は、Business、Commerce、Professional、および Premium プランで利用可能なプレミアム機能です。

動画を見る

始める前に

コード挿入にコードを追加すると、サイトの編集中にコードを無効にするよう Squarespace から求められる場合があります。
コード挿入フィールドに JavaScript を追加するには、コードを <script></script> タグで囲みます。
コード挿入ではなくカスタムCSSエディターにCSSを追加する方法をおすすめします。コード挿入にCSSを追加する場合は、<style></style> タグでコードを囲んでください。
フッター領域は、サイトのテンプレートとバージョンによって決まります。
Ajax 読み込みにより、コード挿入に追加されたCSSが読み込まれなくなる可能性があります。代わりに、CSSを CSSエディターに追加してください。
精算ページでは、コードをサポートしていません。

コード挿入にコードを追加する

コード挿入にカスタムコードを追加する方法は以下の通りです。

[コード挿入] パネルを開きます。
ヘッダー、フッター、ロックページ、注文確認ページ、または注文状況ページに対応する有効なHTMLまたはスクリプトを、適切な [コード挿入] フィールドに追加します。
コードを追加したら、[保存] をクリックします。

ここに追加したコードは、サイトに含まれる全ページの <head> タグに挿入されます。

ここに追加されたコードは、サイト内のすべてのページの末尾の </body> タグの前に挿入されます。

挿入されたコードを Cookie バナーと統合する

コード挿入を使用してサイトにサードパーティーの統合 (Google Ads など) を追加すると、そのコードによって訪問者のブラウザーに Cookie がドロップされる場合があります。お客様のサイトで Cookie バナーを有効にすると、訪問者が Cookie に同意したかどうかに応じ、コード挿入を使用してこれらのサードパーティーの統合による動作を変更できます。

以下のステップを完了すると、訪問者は同意するかを選択できるようになります。

[Cookie と訪問者データ] パネルを開き、[Cookie バナー] の横にあるトグルをオンにして、Cookie バナーを有効にします。
Cookie バナーのタイプとして [オプトインとオプトアウト] を選択すると、サイトの Cookie を受け入れるか拒否するかを顧客が選べる 2つのカスタマイズ可能なボタンが表示されます。
[保存] をクリックします。
必要なコードを追加します。詳細については、以下の例をご確認ください。

Google Ads を例に挙げます。コード挿入を使用してサイトに Google Ads を追加した場合は、Google Ads のコードを Cookie バナーに統合するために追加するコードの例を、このフォーラム投稿でご覧ください。

公式のSquarespace統合を通じてGoogleアナリティクスを使用している場合は、このフィールドにコードを追加する必要はありません。測定 ID を保存した後で、Cookie バナーを有効にしてください。

注: 同意モードは Google により提供される機能です。詳しくは、Google のドキュメントを参照してください。また、カスタムコードの変更は当社サポートの範囲外です。セットアップやトラブルシューティングのサポートが必要な場合は、Google Ads にご相談ください。

ロックページ

ロック画面は、ページまたはサイトがサイト全体のパスワードあるいはページのパスワードで隠されている場合に表示されます。ここで挿入されたコードは、ロック画面のパスワードフィールドの上に表示されます。

このフィールドにコードを追加することもできますが、代替案として [ロック画面] パネルを使用してロックページをデザインすることをおすすめします。これにより、背景画像やスライドショーを追加したり、フォントスタイルを調整したり、ロゴを組み込んだりすることができます。

注文確認ページ

ここで追加されたコードは、ギフトカード、メンバーシップ、サブスクリプションの購入にあたり顧客が精算を完了した後に表示される注文確認ページに挿入されます。

顧客固有の情報を挿入するために使用できるタグが 6つあります。複数のフルフィルメントプロフィールが含まれる購入が分割された場合、購入に含まれる各注文の詳細が表示されます。

{orderId} – 確定済み注文の注文番号
{orderSubtotal} – 確定済み注文の小計
{orderSubtotalCents} – 確定済み注文の小計 (セント単位)
{orderGrandTotal} – 確定済み注文の総計
{orderGrandTotalCents} – 確定済み注文の総計 (セント単位)
{customerEmailAddress} – 精算時に顧客が「メールアドレス」セクションに入力したメールアドレス

注文状況ページ

ここに追加されたコードは注文状況ページに入力されます。注文状況ページは、物販商品、ダウンロード商品、サービス商品を購入した顧客が精算を完了すると表示される確認ページです。顧客は、後でこのページに戻り注文状況を確認することもできます。

{orderId} – 確定済み注文の注文番号
{orderSubtotal} – 確定済み注文の小計
{orderSubtotalCents} – 確定済み注文の小計 (セント単位)
{orderGrandTotal} – 確定済み注文の総計
{orderGrandTotalCents} – 確定済み注文の総計 (セント単位)
{customerEmailAddress} – 精算時に顧客が「メールアドレス」セクションに入力したメールアドレス

顧客は注文状況ページに繰り返しアクセスできるため、追跡スクリプトが複数回トリガーされる可能性があります。追跡スクリプトで同じ顧客を 2 回カウントしないようにするには、精算後に注文状況ページに初めてアクセスしたときにのみ実行するスクリプトを {.if firstPageView} タグと {.end} タグの間に配置します。以下の例をご確認ください。

{.if firstPageView}

精算後にのみ実行する追跡スクリプトをここに追加

{.end}

訪問時に毎回実行するスクリプトをここに追加

注文確認ページのカスタムコードを移行する

物販商品、デジタル商品、サービス商品の注文確認ページを更新しました。これらの商品タイプを購入した顧客は、注文状況、その詳細、および顧客用アカウントを作成するオプションが表示されたページに移動します。

このバナーがコード挿入パネルに表示されている場合は、元の注文確認ページにコード挿入が追加されており、その更新内容がお客様のサイトにまだ適用されていないことを意味します。

この更新をサイトに適用し、デジタル商品、物販商品、サービス商品の精算を完了した買い物客を新しい注文確認ページに移動する方法は以下の通りです。

注文確認ページのフィールドのコードをコピーします。
注文状況ページのフィールドにコードを貼り付けます。
[保存] をクリックします。
[カスタムコードを移行しました] をクリックします。

これらの手順を完了しない限り、すべての買い物客は、購入品の精算後に元の注文確認ページに移動します。

ページごとのコード挿入

また、以下の方法で特定のページにコードを挿入することもできます。

[ページ] パネルでページの上にカーソルを合わせます。
アイコンをクリックします。
[詳細設定] をクリックします。

[ページヘッダーコード挿入] では、そのページの <head> タグにコードが追加されます。

ブログページの設定の [ブログ投稿アイテムコード挿入] では、すべてのブログ投稿にコードが追加されます。

コード挿入がどのように表示されるかは、サイトのバージョンによって異なります。

バージョン7.1
バージョン 7.0

以下の点に留意してください。

[ページヘッダーコード挿入] でのHTMLの使用はおすすめしません。HTMLを使用した場合、[サイトヘッダーの透明性] をオフにするとコードは表示されなくなります。
[ブログ投稿アイテムコード挿入] は、投稿コンテンツの下に表示されます。

以下の点に留意してください。

コード挿入はインデックスのランディングページには表示されません。
テンプレートに応じて、[ブログ投稿アイテムコード挿入] は投稿コンテンツの上か下に表示されます。
[グリッド/リストブログページ] を含むテンプレートでは、コードは個々の投稿ではなく、ブログのランディングページに表示されます。

プレビューでのスクリプトを無効にする

カスタムコードが原因でサイトを安全に編集できない場合があります。問題の解決にあたり、プレビューでスクリプトを無効にするよう Squarespace からお願いする場合があります。この場合、ログインした状態ではカスタムコードは表示されませんが、訪問者に表示されるサイトの状態には影響はありません。

コードにより機能に影響が生じている場合は、サイトの下部に次のメッセージが表示されます。

サイトプレビューの読み込み中にエラーが発生しました。これは通常、挿入されたコードが原因です。

安全に編集するには、サイトの下部にある [プレビューでのスクリプトを無効にする] をクリックします。メッセージは「サイトプレビューでスクリプトが無効になっています」という内容に変わります。カスタムコードを表示するには、ブラウザーで新しいプライベートウィンドウまたはシークレットウィンドウを開き、ページの URL を入力します。

スクリプトを無効にするメッセージが自動的に表示されない場合は、以下の手順に従ってください。

安全な編集中の URL の末尾に「/safe」と入力して Enter キーを押すと、メッセージが表示されます。
それでも上手くいかない場合は、カスタムコードを追加した領域を確認し、トラブルシューティングを行う間一時的に削除してください。

コードを無効にすると、「プレビューでのスクリプトを有効にしますか？」というメッセージが表示される場合があります。これをクリックすると、ログインした状態でのプレビュー、編集、サイト運営に支障をきたす可能性があるため、おすすめしません。このメッセージを非表示にすることはできませんが、表示されるのはログインしているときのみで、訪問者に表示されることはありません。

カスタムコードの変更は当社サポートの範囲外です。つまり、セットアップやトラブルシューティングに関し、当社はこれ以上のサポートを提供することができません。さらに、コードベースのソリューションに関しては、その機能性や Squarespace との完全な互換性は保証できません。これには、Squarespaceのレスポンシブデザインにおける当該ソリューションの機能性 (特にモバイル端末上での外観)や、すべてのテンプレートでソリューションが機能するかどうかが含まれます。カスタムコードは、当社プラットフォームの今後の更新時に、表示に関する問題を引き起こす可能性もあります。当社はこれ以上サポートを提供できかねますが、次のように、お客様が問題解決のために参照できるリソースが多数あります。

カスタムコードを追加するためのベストプラクティスについて学びましょう。

「サードパーティーのカスタマイズに関する基本ガイド」をお読みください。

当社の顧客および開発者用コミュニティである Squarespace Forum をご覧ください。

Squarespace Expertを雇い、ご自分のサイト用のカスタムコードの作成を依頼しましょう。

ビジネス向けにさらにカスタマイズされたソリューションを構築するには、プレミアム機能を備えたエンタープライズ向けのプランをご覧ください。

この記事は役に立ちましたか？

1833人中765人がこの記事が役に立ったと言っています

マルウェアを報告する

フィッシングまたはファーミングを報告する

スパムを報告する

WHOIS連絡先の不正確さを報告する

コード挿入を使用する

サイトのページにカスタムHTMLまたはスクリプトを挿入します。

動画を見る

始める前に

コード挿入にコードを追加する

ヘッダー

フッター

挿入されたコードを Cookie バナーと統合する

ロックページ

注文確認ページ

注文状況ページ

注文確認ページのカスタムコードを移行する

ページごとのコード挿入

プレビューでのスクリプトを無効にする

マルウェアを報告する

フィッシングまたはファーミングを報告する

スパムを報告する

WHOIS連絡先の不正確さを報告する

サイトのページにカスタムHTMLまたはスクリプトを挿入します。

動画を見る

始める前に

コード挿入にコードを追加する

ヘッダー

フッター

挿入されたコードを Cookie バナーと統合する

ロック ページ

注文確認ページ

注文状況ページ

注文確認ページのカスタム コードを移行する

ページごとのコード挿入

プレビューでのスクリプトを無効にする

関連記事

ロックページ

注文確認ページのカスタムコードを移行する