RSS

Mailchecker on DSMX

26 9月

Recently, I saw quite useful jQuery plugin which was introduced on the Japanese Geek website, aka Gigazine.
It says, it could reduced 50% of returned email because of typo or wrong email address which visitor registered in user registration form.

Kicksend/mailcheck · GitHub
https://github.com/Kicksend/mailcheck

How we decreased sign up confirmation email bounces by 50% – The Kicksend Blog
http://blog.kicksend.com/how-we-decreased-sign-up-confirmation-email-bounces-by-50/

Because I love to try to integrate any kind of useful jQuery plugin into DSMX, so let me share how you can do it at here.

mailcheck.js

The Javascript library and jQuery plugin that suggests a right domain when your users misspell it in an email address.

Example on DSMX

Just try to type ‘test@hotmai.con’ or ‘test@gmai.com’. It will suggest you most close actual domain name.

mailcheck example

OK, now here is how to integrate it into DSMX.

1. Upload .js file

upload-jsfile

2. Load .js in the page
Please replace server domain, campaign name, account ID according to your setting.

LoadJS

3. Add class name or ID to the input element

AddClassName

4.Place div element where it should display suggestion

HintPlaceHolder

5. Place Javascript.

mailcheck-JavaScript

Here is my script.

You can add any domain or topLevelDomains in the array. Or simply comment it out, then it will take default value from .js file.

var domains = ['hotmail.com', 'gmail.com', 'aol.com','directsmile.com'];
var topLevelDomains = ["com", "net", "org"];
$('.email').on('blur', function() {
 $(this).mailcheck({
 domains: domains, // optional
 topLevelDomains: topLevelDomains, // optional
 // distanceFunction: superStringDistance, // optional
 suggested: function(element, suggestion) {
 // callback code
 var suggestion = '<table> <tbody> <tr> <td width="80" valign="top" align="left" style=""> <img width="80" height="147" src="template_image/man with query.png" /> </td> <td valign="top" align="left" style=""> <p>Did you mean</p><p class="sug">'+suggestion.full+' ?</p></tr> </tbody> </table>';
 $('#hint').html(suggestion).fadeIn(150)
 },
 empty: function(element) {
 // callback code
 var suggestion = '<table> <tbody> <tr> <td width="80" valign="top" align="left" style=""> <img width="80" src="template_image/serving document.PNG" /> </td> <td valign="top" align="left" style=""> <p>Looks like your email address is valid!</p></p></tr></tbody></table>';
 $('#hint').html(suggestion).fadeIn(150)
 }
 });
});

 

Have a fun!! 🙂

広告
 

タグ: , , , , , , , , ,

Mailchecker on DSMX」への8件のフィードバック

  1. Håkan Gryglas

    2013年10月17日 at 7:16 pm

    Hi nog.
    great blog! 🙂
    im wondering how I could make this script write to database and also go to a “thank you.html” ?
    i did try to remove the “empty: function” but that didn’t do it.
    Any suggestions to point me in the right direction?

     
    • nog

      2013年10月17日 at 11:01 pm

      Hi Håkan,
      Thank you for your comment!
      Since I’d like to show how this Mailchecker work, I didn’t make it to be able to register. To be able to regiser, please change your script like in below.

      To call it by name attribute of input element is for Ver5 compatible.

      var domains = ['hotmail.com', 'gmail.com', 'aol.com','directsmile.com'];
      var topLevelDomains = ["com", "net", "org"];
      $('input[name="xxxxxxxxxxxxxxx"]').on('blur', function() {
       $(this).mailcheck({
       domains: domains, // optional
       topLevelDomains: topLevelDomains, // optional
       // distanceFunction: superStringDistance, // optional
       suggested: function(element, suggestion) {
       // callback code
       var suggestion = '<table> <tbody> <tr> <td width="80" valign="top" align="left"> <img width="50" height="50" src="ANY_Image.jpg" /> </td> <td valign="top" align="left"> <p>Did you mean</p><p class="sug">'+suggestion.full+' ?</p></tr> </tbody> </table>';
       $('#hint').html(suggestion).fadeIn(150)
       },
       empty: function(element) {
       // callback code
        $("#hint").empty();
       }
       });
      });
      
       
  2. Håkan Gryglas

    2013年10月18日 at 8:23 am

    Morning Nog.
    I´m afraid this didn´t do it.
    I also tried to remove the email-validation as I thought this might complicate it.
    But it still doesn´t write to DB or passes me through to my “thankyou page”.

     
    • nog

      2013年10月18日 at 10:19 am

      I confirmed that my script work on Ver5 DSMX system even if you enabled build-in validation for the input field as well.
      Please try to make new campaign, and just follow the instruction. I used the latest version of release of this .js file.

       
  3. Håkan Gryglas

    2013年10月18日 at 12:09 pm

    Ok.
    It worked when I created a new campaign. Why is this? Weird.
    But, it now creates a new record even if it´s not a complete emailaddress. Like for example: hello@gmail.c
    Regards Håkan

     
    • nog

      2013年10月18日 at 2:49 pm

      Hi,
      You need to understand what this “MailChecker” does. It will check the entered value, and suggest most closest possible top domain or domain name.
      And the combination with build-in email validation, you can avoid customer enter non-email looks address.
      However, xxx@gmail.c would be recognized as possible correct domain name. If you’d like to reject such value, then you need to modify javascript and add additional validation by yourself.

      Again, it does not validate the input value. It only suggest you possible top domain or domain name from your list. 🙂

       
  4. Håkan Gryglas

    2013年10月21日 at 3:44 pm

    Nobuaki, this I understand and know that it only suggests the input value.
    But, it is useless if you can´t use this “input field” with a campaign in DSMX. I think it absolutely should be able to:
    #1 Suggest the correct E-mail address -Check
    #2 When I/User has corrected the E-mail address they should be able to proceed to next page -No Check 😦
    #3 If this “input field” has the function of “write to database” then it should. -No check 😦

    So, for my campaign the only thing that is working is the actual “mailCheck”-function, which is neat. But since the rest isn´t working or can´t be implemented to an actual campaign then I don´t think it is actually a script/function that is applied to DSMX.

     
    • nog

      2013年10月21日 at 10:53 pm

      Hi Håkan,
      Good question. So let me answer for all.

      #1 –> Good to hear! That’s all what I want to tell at this tip. 🙂

      #2 –> To control page transition by input value, and if you’d like to have such restricted validation for email address, then I recommend you to use “regEx (Regular Expression)”. With combination of regEx for input field, you can easily get big advantage from all tips on the internet. For example here
      Furthermore, you can set your regEx by selecting “Regex” from dropdown menu for validation type in DSMX. As you know, Crossmedia made Easy 🙂

      #3 –> my script call this function by checking “blur” event on the input field. How about to change a selector calling method? So you can specify which input should have this “mailcheck” 🙂

      It would be great if this tip become a part of your campaign!!

       

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

 
%d人のブロガーが「いいね」をつけました。