ChatGPT / CodexからHubSpotへ

Codexから​HubSpotへ:​プルリクエストを​編集できる​モジュールに。

CodexやChatGPTでフロントエンドを作りましたか?transjtはCodexからHubSpotへの変換を自動で行います。リポジトリ内のReactを、マーケターがドラッグ&ドロップエディターで編集できるネイティブなHubLモジュールにするので、誰もHubLを書く必要はありません。

プレビュー後にお支払い

transjtのテーマで作ったホームページを表示したHubSpotのページエディターと、その横に並ぶモジュール

代理店、フリーランス、マーケティングチームに選ばれています

変換すべきとき

Codexの​出力を​HubSpotへ​変換すべき​とき

Codexが書いたReactを、どこかにデプロイするのではなく、HubSpotに置くべき6つの状況。

  • Codexがプルリクエストを作った。HubSpotに必要なのはモジュール。

    CodexはGitHubリポジトリにプルリクエストとして作業内容を提案するので、コードはすでにtransjtが読み取る場所にあります。マージ後にリポジトリを接続すれば、すでにあるコードからHubSpotモジュールへの変換が始まります。

  • チームにHubLを書ける人がいない

    HubSpotのテンプレート言語はほかのどこでも使われず、サイトを1つ公開するためだけに学ぶのは時間に見合いません。transjtがHubLを書くので、変換にHubSpotの開発者は必要ありません。

  • マーケティングが、誰にもプロンプトを頼まずにページを作る

    キャンペーンページは、誰かがエージェントをもう一度動かすのを待つべきではありません。編集可能なフィールドを持つHubSpotモジュールになれば、コンポーネントは、マーケティングチームがエディターで組み立てる部品になります。

  • サイトはCRMと同じ場所に置くべき

    コンタクトとメールをHubSpotで管理し、レポートもそこで行っているなら、Webサイトを別の場所でホストすると、サイトを運用する限り2つのシステムをつなぎ続ける必要があります。ネイティブテーマなら、ページは、レポート対象のデータと同じポータルに置かれます。

  • 訪問者に合わせてページを変えたい

    HubSpotは、ライフサイクルステージ、リストのメンバーシップ、任意のコンタクトプロパティに応じてコンテンツを出し分けますが、対象はネイティブなコンテンツだけです。Codexで作ったサイトのページでこのパーソナライズを使うには、まず変換が必要です。

  • 推測ではなく、アトリビューションが必要

    ページをパイプラインに結び付けられるのは、そのページがHubSpotのコンテンツである場合だけです。ネイティブテーマなら、セッションからフォーム送信まで、ページ上のタッチポイントが、追加のトラッキング作業なしで実際の取引に紐づけてレポートされます。

計算してみる

Codexは​いくつの​コンポーネントを​作りましたか?

transjtでサイトを公開

費用を節約
$8,100*
時間を節約
81時間*手作業で10.1作業日
すぐに結果が出る
1.5〜3時間*テーマ全体で
無料で始める

*ReactからHubSpotへの手作業での移行時間に基づく概算です。コンポーネントあたり約4.5時間、1時間あたり$100、1日8時間で計算しています。transjtは、リポジトリから約1.5〜3時間でテーマを構築します。

仕組み

Codexの​出力を​HubSpotへ、​4つの​ステップで​変換。

ChatGPT / Codexのプロジェクトから、GitHubを経由してネイティブなHubSpotテーマへ。

  1. Codexでフロントエンドを作る

    ChatGPT、CLI、またはエディターでCodexにタスクを渡します。変換のためには、フロントエンドをReactとViteのままにし、サーバーサイドレンダリングを避ける必要があります。HubSpotはHubLを自社のサーバーでレンダリングするためです。タスクの中でそう伝えれば、Codexはその制約を守ります。

  2. プルリクエストをマージ

    CodexはGitHub上で、作業内容をプルリクエストとして提案します。ほかのプルリクエストと同じようにレビューしてマージしてください。リポジトリ以外に、変換のための準備は必要ありません。

  3. リポジトリをtransjtに接続

    transjtのプロジェクトでGitHubを認証し、リポジトリとブランチを選びます。transjtはコンポーネントツリーを読み取り、どの部分をHubLテンプレートにし、どの部分を編集可能なモジュールフィールドにするかを判断します。

  4. HubSpotにエクスポート

    HubSpotを選び、プレビューを確認します。確定すると、transjtが、デザインマネージャーからアップロードできるネイティブテーマを作成します。そのHubLテンプレートとモジュールは、クライアントに渡す前に読んでレビューできます。

ChatGPT / Codex以外にも

ほかの​コーディングツールも​接続できます。

すべてのAIビルダーを1ページにまとめています:AIからHubSpotへ。

お客様の声。

アーティストのアトリエで机に向かう男性お客様
“We’d seen plenty of tools promise magic for page and theme creation, but they always under-delivered. Transjt proved to be the exception.”
KevinThinkFuel
  • 95–99%完成コードの割合(構成の整ったファイルの場合)
  • ∞取り込めるAIビルダー(Figmaにも対応)
  • 2ネイティブ対応のCMS:HubSpotとWordPress
  • 1クリックでエクスポート。数分後にはテーマがアカウントに届きます
得られるもの

Codexの​リポジトリを​HubSpotテーマに​しませんか?

Codexから作ったHubSpotテーマに実際に含まれるもの

HubSpotのCMSは、マーケターがコードを開かずに並べ替えたり、CRMデータに合わせてパーソナライズしたりできるモジュールを中心に作られています。この設計のため、Reactフロントエンドをそのまま入れることはできません。まずコンポーネントを、編集可能なフィールドが宣言されたHubLモジュールにする必要があります。transjtはその変換を自動化し、読みやすいテンプレートファイルを書くので、結果を開いて、ほかのプルリクエストと同じようにレビューできます。

FAQ

Codexから​HubSpotへの​よくある質問。

CodexのプロジェクトをHubSpotテーマに変換するときに知っておきたいこと。

デモを予約
  • CodexはGitHubリポジトリ上で作業し、変更をプルリクエストとして提案します。マージされると、transjtがリポジトリを読み取り、フロントエンドをネイティブなHubLモジュールに変換します。別のエクスポート手順はありません。

  • まず、Viteを使ったReactプロジェクトとしてGitHubリポジトリに入れてください。そこから先の手順は同じです。リポジトリをtransjtに接続し、HubSpotにエクスポートします。

  • タスクの中で、スタックはReactとViteで、サーバーサイドレンダリングは使わないと伝えてください。HubSpotはHubLをサーバーサイドでレンダリングするため、きれいに変換するには、フロントエンドがクライアントレンダリングである必要があります。Codexは、こうした明示的な指示に従います。

  • はい。それこそが、フロントエンドを埋め込むのではなく変換する理由です。transjtは編集可能なフィールドを持つモジュールを出力するので、文章、画像、セクションの順序はすべて、ソースに触れずにHubSpotのドラッグ&ドロップエディターで変更できます。

  • カスタムテーマのアップロードには、カスタムコードファイルを使えるContent Hubのエディションが必要で、Starterエディションでは制限があります。これが唯一の必須条件なので、作業範囲を決める前にエディションを確認してください。

  • リポジトリがGitHubにあれば、ページ数にもよりますが、transjtは通常数時間でHubSpotテーマを用意します。

今日​デザインして、​明日​公開。

transjtでは一秒一秒が大切です。だから私たちの使命はシンプル。あなたの時間を節約し、ワークフローの手間をなくすことです。