Mellowtelウェブサイト収益化ウィジェットクイックスタートガイド

Mellowtelは、訪問者が未使用の帯域幅を共有することを選択してあなたをサポートできるようにします。あなたはサイトに小さなウィジェットを追加し、訪問者はコンパニオン拡張機能をインストールすることを選び、彼らのブラウザが処理するリクエストに基づいて収益を得ます。

推定時間: 5〜10分。 必要なもの: MellowtelアカウントとサイトのHTML（または同等のフレームワーク）へのアクセス。

仕組み

ウィジェットを埋め込む

スクリプトタグがあなたのサイトにボタン、アイコン、またはバナーを表示します。

訪問者がクリックする

彼らはMellowtelコンパニオン拡張機能をインストールするページに移動します。

あなたにクレジットが付与される

あなたのinvite_idがその訪問者をあなたのアカウントにリンクし、彼らのブラウザが処理するリクエストがあなたに帰属します。

始める前に

Mellowtelアカウント。こちらでサインアップしてください。
サポートリンクを作成した後にダッシュボードで見つかるあなたのinvite_id。
サイトのHTMLへのアクセス、またはフレームワークやCMSを通じて<script>タグを追加する能力。

ウィジェットのインストール

これをサイトに貼り付け、ダッシュボードからの値でINVITE_IDを置き換えます。ページレンダリングをブロックしないように</body>の直前に配置することをお勧めします。

<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

import { useEffect } from 'react'

export function MellowtelWidget() {
  useEffect(() => {
    const s = document.createElement('script')
    s.src = 'https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID'
    s.async = true
    document.body.appendChild(s)
    return () => { s.remove() }
  }, [])
  return null
}

<!-- テーマのfooter.phpに</body>の直前に追加するか、 -->
<!-- "Header & Footer Scripts"プラグインを使用してフッターフィールドに貼り付けます。 -->
<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

<!-- Webflow: プロジェクト設定 > カスタムコード > フッターコード -->
<!-- Shopify: オンラインストア > テーマ > コードを編集 > theme.liquid（</body>の前） -->
<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

設定オプション

スクリプトURLのクエリパラメータを通じてウィジェットの外観を制御します。

パラメータ	必須	値	説明
`invite_id`	はい	ダッシュボードからのあなたのID	収益をあなたのアカウントに帰属させます。
`type`	はい	`button`, `icon`, `banner`	あなたのサイトに表示されるウィジェットスタイル。
`position`	はい	`bottom-right`, `bottom-left`, `top-right`, `top-left`	ページ上でのウィジェットの位置。

出荷前にすべての組み合わせをライブでプレビュー: ウィジェットプレビューを開く。URLのtypeとpositionパラメータを入れ替えて各バリエーションを確認してください。

動作確認

サイトを読み込む

新しいブラウザタブ（またはキャッシュをバイパスするためのシークレットウィンドウ）でページを開きます。

ウィジェットが表示されることを確認する

選択した位置にボタン、アイコン、またはバナーが表示されるはずです。表示されない場合は、ブラウザコンソールでブロックされたリクエストを確認してください。

フローをクリックして進む

ウィジェットをクリックすると、invite_idが付いた拡張機能インストールページに移動するはずです。

ダッシュボードを確認する

訪問者がインストールしてオプトインすると、そのアクティビティがあなたのMellowtelダッシュボードに表示されます。

トラブルシューティング

ウィジェットが表示されない

スクリプトタグが<body>内にあり、invite_idが入力されていることを確認してください。
DevToolsを開き、ネットワークタブでcdn.mellow.tel/widget.jsへのリクエストを確認してください。ブロックされている場合、広告ブロッカーやコンテンツフィルターが原因である可能性があります。
コンテンツセキュリティポリシーを確認してください。script-srcでhttps://cdn.mellow.telを許可する必要があるかもしれません。

「missing invite_id」警告が表示される

invite_idパラメータが空であるか、リテラルのINVITE_IDプレースホルダーがまだ含まれています。ダッシュボードから実際の値をコピーしてURLに貼り付けてください。

ローカルでは動作するが本番環境では動作しない

多くの場合、CSPまたはCDNルールがスクリプトを削除しています。本番ホストのレスポンスヘッダーを確認し、cdn.mellow.telを許可リストに追加してください。

ウィジェットを削除するにはどうすればよいですか？

<script>タグ（またはそれをラップするフレームワークコンポーネント）を削除してください。他にクリーンアップするものはありません。

訪問者への開示

訪問者がオプトインの意味を理解できるように、プライバシーポリシーに短い注意書きを追加することをお勧めします。例えば：

このサイトはMellowtelと提携しています。拡張機能をインストールすることを選択した場合、ブラウザはこのサイトをサポートするために未使用の帯域幅を共有することがあります。インストールは任意であり、いつでもオプトアウトできます。

完全な詳細については、プライバシーおよびオプトイン/オプトアウトをご覧ください。

助けが必要ですか？

info@mellowtel.comまでお問い合わせいただくか、Discordに参加してください。

​仕組み

​始める前に

​ウィジェットのインストール

​設定オプション

​動作確認

​トラブルシューティング

​訪問者への開示

​助けが必要ですか？

仕組み

始める前に

ウィジェットのインストール

設定オプション

動作確認

トラブルシューティング

訪問者への開示

助けが必要ですか？