KARTE BlocksでscriptタグをBlocks内に埋め込む方法

Published in

nextbeat-engineering

Nov 27, 2023

こんにちは。ネクストビートでプロジェクトマネージャー/スクラムマスターをしている矢澤です。
普段の業務では、子育て情報メディア「KIDSNA STYLE」と保育園・幼稚園検索「KIDSNA 園ナビ」のプロジェクト推進/開発補助をしています。

今回は弊社で利用しているKARTE Blocksの検証事例を紹介していこうと思います。
KARTE Blocksは低コストで要素の変更が可能なノーコードツールです。
方法を知っていれば難しい知識は必要なく簡単に扱えますので、是非参考にしてください。

本記事は、以下の内容で構成しております。

HubSpotフォームの埋め込みコードをBlocks内に埋め込む
・コード編集（HTML）
・コード編集（SCRIPT）

Instagram投稿の埋め込みコードをBlocks内に埋め込む
・コード編集（HTML）
・コード編集（SCRIPT）

まとめ

なおページ登録、編集の詳しい説明につきましては弊社、尾崎執筆の記事（KARTE Blocksの使い方（基礎編））を参照頂けましたら幸いです。

HubSpotフォームの埋め込みコードをBlocks内に埋め込む

① ページエディタ画面から任意のブロックを選択し「編集」を押下します。

②「コード編集」を押下します。

③「HTML」にて書き換えたい要素を追加します。今回はdiv要素、id属性をテスト用に追加しました。「HTMLを保存」を押下します。

※ここでは「HTML」に埋め込みコード（scriptタグ）を直接貼り付けする事ができません。

④「SCRIPT」にてJSファイルを読み込むようスクリプトを記述します。

KARTE Blocksでは先ほどの「HTML」で要素を書き換えが完了した後に、「SCRIPT」では指定ブロックのscriptタグで記載されているJSを実行するよう制御しています。

scriptタグを読み込んだ後に何か処理を実行したい場合、setTimeoutなどのメソッドを記述する必要があります。ただし非同期で処理が実行されるため、プレビュー画面やSTG環境にて動作を予め確認した上でプログラム処理の流れを調整する必要があります。

今回の処理ではHubSpotフォームのJSファイルを読み込んだ後で、HubSpotフォームの埋め込みコードが読み込まれるよう待ち時間を設けて実装しております。

なおHubSpotフォーム埋め込みコードの詳細につきましては以下をご参照下さい。
https://developers.hubspot.jp/docs/cms/building-blocks/forms

⑤ ページエディタ画面にて指定したブロックにHubSpotフォームが埋め込まれる事が確認できました。記事下に期間限定でアンケート公開したい際にページ改修する事なく実装できるのが便利だと思いました。

① ページエディタ画面から任意のブロックを選択し、「HTML」にて書き換えたい要素を追加します。今回はdiv要素、align属性、id属性をテスト用に追加しました。「HTMLを保存」を押下します。

② Instagram投稿の埋め込みコードは予めコピーしておきます。

③「SCRIPT」にてJSファイルを読み込むようスクリプトを記述します。
今回の処理ではInstagram埋め込みコード、JSファイル読み込みと初期化プロセスの実行を実装しております。

埋め込みたい外部サービスに応じて、処理順序は工夫する必要があります。具体的には埋め込みページの高速化としてJSファイルの遅延読み込み対応が必要になります。asyncでJSを読み込む、setTimeoutによる非同期スリープを行なう、などの実装を記述します。

その際、HTMLのscriptタグ内にインラインで書かれたjsをデバッグする事になります。KARTE Blocksでは「SCRIPT」にdebuggerを埋め込む、もしくはconsole.logで該当箇所を特定するようにします。

なお今回のサンプルコードではジェネレータ関数やasync/awaitは使っておりません。

④ ページエディタ画面にて指定したブロックにInstagram投稿が埋め込まれる事が確認できました。SNSを通じてブランドを訴求したい、事例を紹介したい際にページ改修する事なく実装できるのが便利だと思いました。

以上、HubSpotとInstagramを例にKARTE Blocksでscriptタグを埋め込む方法について紹介しました。ローコードでの実装になりますのでノーコードでの実装に比べ、やや難易度が高く感じたかもしれません。

KARTEサポートページでもscriptタグをBlocks内に埋め込む方法についてサンプルコードと合わせて記載がありますので、合わせて参考にしてみて下さい。
https://support.karte.io/post/7bGoSkk4nhlqWsMcILA3Wo#2-4

本記事をご覧いただき、ネクストビートの技術や組織についてもっと話を聞いてみたいと思われた方、カジュアルにお話しませんか？

・今後のキャリアについて悩んでいる
・記事だけでなく、より詳しい内容について知りたい
・実際に働いている人の声を聴いてみたい

など、まだ転職を決められていない方でも、ネクストビートに少しでもご興味をお持ちいただけましたら、ぜひカジュアルにお話しましょう！

また、ネクストビートについてはこちらもご覧ください。