Read Article

多数のサイトを運営していてもOK!流入元判別カスタマイズ

多数のサイトを運営していてもOK!流入元判別カスタマイズ

どうも、トッティです。

弊社の提供しているフォームクリエイター、もちろんご存知ですよね?ええ!?ご存じ無い〜〜!!?

外部からkintoneにデータを登録できるフォームを生成するサービスです。弊社でも「お問い合わせフォーム」や「お申し込みフォーム」等に利用しています。お客様が入力した内容が、そのままkintoneに登録されるので、コピペの手間すら発生せずとっても便利です。

さて、そんなフォームクリエイターですが、たまにお客様からいただくご要望があります。それが、今回の記事のテーマです。

複数のサイトにフォームを設置し、どこから申し込みがあったか判別したい

どのフォームから登録されたか知りたい!
どのフォームから登録されたか知りたい!

これ、実はフォームクリエイターでできるんです。どのサイトに設置しているフォームからの反響が一番良いのか等を調べるためにgoogle analytics等のツールを使っている方も多いかとは思いますが、基本的に考え方は同じです。

今回は標準機能の対応方法と、JavaScriptでカスタマイズした方法を紹介します。

A.標準機能(フィールドの非表示登録)で設定する

「フィールドの非表示登録」はフォームクリエイター プレミアムコースでのみ使える「高度な設定」内にある機能です。回答するお客様には表示せず、管理者側で設定した値をkintoneに登録することができます。言わば「隠しフィールド」ですね。この隠しフィールドに「フォームA」「フォームB」・・・と、kintoneに投げ込みたいそのフォーム特有の値を設定すればよいのです。

まずは、「フィールドの非表示登録」にチェックを入れます
まずは、「フィールドの非表示登録」にチェックを入れます

「フォームの編集」に戻り、①非表示にするフィールドを選択し、②どの値をもたせるか選択or入力します。
「フォームの編集」に進み、①非表示にするフィールドを選択し、②どの値をもたせるか選択or入力します。

これで、お客様には閲覧させない「東京」というフィールドができました
これで、お客様には閲覧させない「東京」というフィールドができました

この設定を行えば、お客様がわざわざ「東京」ということを選択すること無く、東京エリアを対象としたフォームから入力したのだな、ということが分かります。

この設定とほぼ同じことを4回行えば、「大阪」「福岡」「札幌」エリアを対象としたフォームを作成することが可能です。

この方法の難点は「用意したい隠しフィールドの数だけフォームを作成する必要がある」という点です。5、6個までなら現実的ですが、20個、30個となると初期設定が大変です。

ではその様な場合、対応方法は無いのでしょうか?

いえ、実は少しカスタマイズすることによって、フォーム自体は一つでも、隠しフィールドに対し、何種類の値でも登録することが可能です。

B.JavaScriptでカスタマイズする

さて、早速カスタマイズ方法を見てみましょう。

フォーム自体にJavaScriptを適用することが可能
フォーム自体にJavaScriptを適用することが可能

フォームクリエイターの管理画面では「高度な設定」内から、JavaScriptを適用することが可能です。今回はここにJavaScriptを適用し、フィールドを隠し、任意の値を投げ込みます。

順を追って説明します。

1.アプリを用意する

まずは今回使用するアプリを用意します。

シンプルな問い合わせアプリ
シンプルな問い合わせアプリ

隠した値(パラメータ)を入れるフィールドも用意しましょう。

2.フォームクリエイターでフォームを作成する

Formcreator

フォームクリエイターの詳しい使い方はこちらの記事で解説しておりますので、是非ご覧ください。

3.JavaScriptを用意する

見本を用意しました。下記JavaScriptです。

上記JavaScriptの4行目、5行目のIDを隠したいフィールドのIDの置き換えます。今回であれば「パラメータ格納場所」ですね。

4.フォームクリエイター内で、該当フィールドのIDを確認する

google chromeで「検証」している図
google chromeで「検証」している図

5.JavaScript内に該当IDを転記する

上記な感じで該当フィールドのIDを転記します。

6.作成したJavaScriptをフォームクリエイターに適用する

Formcreator

フォームクリエイターの「高度な設定」内から、JavaScriptをアップロードして適用します。

7.公開するフォームのURLにパラメータを付与して運用する

もともとのURLに"&parameter=◯◯◯"を付けて運用する
元のURLに”&parameter=◯◯◯”を付けて運用する

フォームクリエイターで生成される元のURLの末尾に下記を追加します。

&parameter=◯◯◯

これで出来上がりです。kintoneに登録されるレコードには◯◯◯が登録されていることが確認できるはずです。上記画像のように、”totty”をつけた状態で投稿したレコードを見てみましょう。

tottyが入ってる!
tottyが入ってる!

できましたね!フィニッシュです。

最後に、このカスタマイズの使いドコロ

と、今回は久しぶりにカスタマイズをしたので疲れました。使いドコロとしては多くのお問い合わせページ、ランディングページを運用している際、どのページの反応が良いかは分析ツールで見ている方が多いかと思います。ですが、この隠しフィールドとパラメータを組み合わせることによって、バイネームで、誰が、どのサイト、どのフォームからアクセスしたかが瞬時に分かるのでとってもステキですよ!

是非お試しください。

※JavaScriptの個別カスタマイズについてのご相談は受付致しかねますので、予めご了承ください。また、上記JavaScriptは挙動を保証するものではございません。

それではまた。

この記事を書いた人

トッティ
トッティ
トッティです。「開発者ではない。でも、いろいろkintoneを使い倒したい!」そんなあなた、奇遇ですね、僕もです。非開発者としての高みを目指しつつ、その道程を共有致します。

今日も張り切って行きましょう。
URL :
TRACKBACK URL :

COMMENTS & TRACKBACKS

  • Comments ( 3 )
  • Trackbacks ( 0 )
  1. 多数フォームの判別を行うため「B.JavaScriptのカスタマイズ」はとても有用でぜひ実装したいと思い試してみましたが、ブラウザがIEだとkintoneに値が入りませんでした。
    chromeでは正常に動作しました。ブラウザによって何か違いがあるのでしょうか?

    • 早速トライされたのですね!ありがとうございます。
      さて、ブラウザの違いですが特に意識しておりませんので、正直分かりません。
      テストはgoogle chromeで行いました。
      いずれにせよ、JavaScriptの開発部分となりますので、弊社でお応えできることはほとんど無く。。。
      このような回答で申し訳ありません。

    • IE8以下だったりしますかね?
      addEventListenerなどはIE8以下で使用できないようです。
      その他にも、kintoneはややIEでの挙動が怪しいところがチラホラあったり……。
      また、kintone自体の動作環境もIEだと9、11、Edgeのみで、それ以外ではカスタマイズ次第で全く動かなかったりします。

LEAVE A REPLY

*
*
* (公開されません)

Return Top