Mailchecker on DSMX

投稿日: 2013年9月26日2013年9月26日投稿者: nogカテゴリー: ダイレクトスマイル、DirectSmile Crossmedia、jQuery8件のコメント

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.

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

1. Upload .js file

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

3. Add class name or ID to the input element

4.Place div element where it should display suggestion

5. Place 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!! 🙂

Dead image link

投稿日: 2013年7月16日2013年7月16日投稿者: nogカテゴリー: ダイレクトスマイル、DirectSmile Crossmedia、Supportコメントをどうぞ

In any case, it’s better to prepare for the accidental error. For example, dead image link in the campaign.

It can be happen when you use image from Global, or Account, and some other designer accidentally deletes the file from there. Then you will never know that dead image link appeared in your campaign.

This is very simple and useful jQuery to replace dead link image.


$(function () {
$('img').error(function(){
$(this).attr({src:'http://YourDomain/.../Missing.png',alt:'Image file is missing'});
});
});

The src link have to be absolute URL path.
If you’d like to use uploaded image for it, try to place it in actual page, then check the file path from HTML code by displaying page preview. So you can copy the file path, and use it as alternative image file for this function.

Thank you for Mana, who is introducing very nice tips for web creator!
You can find more and more useful tips in her blog.

Interactive PieChart by DSMX

投稿日: 2013年6月6日2013年6月30日投稿者: nogカテゴリー: ダイレクトスマイル、DirectSmile Crossmediaコメントをどうぞ

Have you ever thought that you’d like to place any interactive PieChart in your campaign?

Here is one example campaign, please try it!

PieChart Campaign

Thank you for amCharts!!!

Here is short description how you can implement this 3D PieChart into your DSMX Campaign.

Download zip file from amCharts website.
Create new page(You have to select “Pure HTML page”)
Upload amcharts.js and style.css into Content menu
Paste entire HTML code, then replace the link of amchart.js and style.css to which of you have uploaded.
You can check the link to those files when you drag them into normal page. Then you can see direct link to that files. Then copy link, and paste them into this HTML code.
Now we are coming most interesting part. How you can get the value from database.
For this example, I made it work interactively, so it will take a value from the number of records in different data relations. Depends on your vote, it will create new record in Data Relation, and it will take the number of records to use it as value for this PieChart.
At last, you need to create start page with radio button, and place the button for the registration of new record.
Done!!
Now you can test it the campaign!!

http://piechart.nogtips.com