UpsNエージェントの設置方法
（事前準備）UpsNエージェントを設置するページのURLを確認しておきましょう
仮にこのページの画面下部にあるフォームをUpsN対応するとします。
ブラウザのアドレス欄に表示されているhttps://www.mellow-fellows.com/upsn_helper.htmlがURLになります。
１、まずはUpsNカスタマー登録をして、APIトークンを取得しましょう（登録は無料です）
UpsNカスタマー登録 ←このボタンを押すと登録画面が開きます。
カスタマー登録が完了しますと、カスタマーサイトのメニュー画面が表示されます。（カスタマーサイトにログインした状態になります）
メニュー画面の上部に「APIトークン」が表示されていますので、コピーできるようにしておきましょう。
３で追加する行の取得したAPIトークン部分はその文字列に置き換えて進めていただきます。
２、次に「ご利用のURL」を追加しましょう
UpsNエージェントを設置するページのURLを登録します。
カスタマーサイトのメニュー画面から「 ご利用のURL」ボタンをクリックして、「 URLを追加する」ボタンをクリックすると登録画面が表示されます。
仮にこのページの場合、追加するURLはhttps://www.mellow-fellows.com/となります。
追加するURLはhttps://www.mellow-fellows.com/upsn_helper.htmlでも問題ありませんが、以下の点で不利になる場合がございます。
-
別のページhttps://www.mellow-fellows.com/index.htmlでもUpsNエージェントを利用する場合、もう１つURLを追加する必要があります
（https://www.mellow-fellows.com/で登録した場合は必要ありません） -
別のページhttps://www.mellow-fellows.com/index.htmlでもUpsNエージェントを利用する場合、訪問回数が不利になる場合があります
（https://www.mellow-fellows.com/で登録した場合は１訪問中に双方利用しても１カウントになりますが、URLを２つ登録した場合は１訪問中でも双方利用すると２カウントになります）
３、UpsNエージェントを設置するページに１行追加しましょう
以下のコードを<head>タグか<body>タグの最後に追加してください。（「取得したAPIトークン」部分は実際のAPIトークンに置き換えてください）
<script src="https://www.mellow-fellows.com/UpsN/?script=取得したAPIトークン"></script>
※もし、設置するページが非SSL(HTTPSではなくHTTP)の場合は、下記を追加してください。
<script src="https://www.mellow-fellows.com/UpsN/?protect_privacy=self&script=取得したAPIトークン"></script>
４、ブラウザで設置したページを見てみましょう
これまでの手順に問題がなければ、特に変わったところは無いと思います。
※スマホ以外（PCやMac）で見てください
もしJavaScriptコンソールなどに、４で追加した<script>のエラー(404)が出ている場合は「APIトークン」と「ご利用のURL」を再度ご確認願います。５、ブラウザのアドレス欄の末尾に#upsn_helperを追加してみてください
画面下部にヘルパー画面が出てくると思います。（出ない場合は「APIトークン」と「ご利用のURL」を再度ご確認願います）
実際にこのページのアドレス欄の末尾に#upsn_helperを追加していただく事で、どのような画面になるかを見ていただけます。
（コチラをクリックしていただければ同じ画面になります）
このページの画面下部にあるフォームの、入力項目の上に選択ボックスが出ていることをご確認いただけると思います。６、フォームの入力項目上に出た選択ボックスの選択肢から、その項目に自動入力する内容を選んでください
自動入力する内容を選択すると、ヘルパー画面左側に追加していただくコードが自動生成されると思います。
UpsNアイコンボタン（クリックするとQRコードが出てくるボタン）の挿入位置について、HTMLでの指定が難しい方は「UpsNアイコンボタンを自動挿入する」にチェックを入れてみてください。
「UpsNアイコンボタンを自動挿入する」にチェックを入れた場合は、「実行してみる」ボタンで実際にボタンが挿入され、動きを確認していただけます。
また、アイコンの大きさや位置も調整していただけます。
７、ヘルパー画面で自動生成されたコードを<body>タグの最後に追加してください
（３で追加した行は必要ですので消さないでください）
追加していただいた後、ブラウザで再度設置したページを開いてください。
UpsNアイコンボタンが出ていれば設置は成功です。念のため、UpsNが期待どおりに動作するかを確認してください。
問題なければ設置は完了です。
追加したコードを削除していただければ、再度ヘルパー画面をご利用いただけます。お気軽にお問い合わせください！
「ちょっと難しそうだな・・・」と感じられたら、お気軽にお問い合わせください！
私どもが追記いただく内容を作成いたします。（お問い合わせの際は、設置をご希望のページURLをご記載ください）