# Uniqlo VN - Guideline to implement Mailchimp API via Ematicjs

| Revision | Date | PIC | Comment|
| -------- | -------- | -------- |---|
| Version 1| | Kelly ||
| Version 2| 12/18/2020 | Kelly| Updated in part 2-a |
| Version 3| 04/09/2021 | Peter| Updated in part 2-a and 2-b|

## 1. Ematicjs - Init code

We need to include the Ematic init script on every page of the website. If we only want to collect user information on some specific pages, we can include the script on these pages only.

Copy and paste the following JavaScript snippet into your **Subscribe Successfully** page so that it appears before the closing `</head>` tag

<script>
    (function(i,s,o,g,r,a,m){i['EmaticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//api.ematicsolutions.com/v1/ematic.min.js','ematics');
var ematicApikey = "c27fd3a9ee9511eabba10242ac110002-sg7";

var opt = {
    email: "",
    country_iso: "vietnam",
    currency_iso: "vnd",
    language_iso: "vietnam"
  };
    
    //initialize
    ematics("create", ematicApikey, opt);
</script>

## 2. Collect new users from Sign up form

### a. Store user fields after they have filled in the form

On the Sign up form, embed the following code before `</body>` tag to save user fields when they have filled in the information and click "Đăng ký ngay"

**Important Updates**
> **Version 3**: We removed name fields and phone from syncing into Mailchimp.

<script>
$("#signup").on("submit",function(e) {
    e.preventDefault(); // cancel default submission
    var data = {
               "email": document.getElementsByName("email")[0].value,
               "city": document.getElementById("state").value,
               "men": (document.getElementById("chk_mens").checked)? "Men":null,
               "women": (document.getElementById("chk_womens").checked)? "Women":null,
               "kids": (document.getElementById("chk_kids").checked)? "Kids":null,
               "privacyPolicy": (document.getElementById("agree_privacy").checked)? "Privacy policy":null,
               "marketingPolicy": (document.getElementById("agree_SPI").checked)? "Marketing policy":null
            }
    sessionStorage.setItem('data', JSON.stringify(data));
    window.location.replace("<Url to Sucessfully page>");
});
</script>

### b. Send user info to Mailchimp

**Important Updates**
> **Version 3**: We removed name fields and phone from syncing into Mailchimp.

On the successful page, embed the follow code before `</body>` to push the information to Mailchimp.

<script>
    var data = JSON.parse(sessionStorage.getItem("data"));
    var preference_group = [data.men, data.women, data.kids];
    var policy_group = [data.privacyPolicy, data.marketingPolicy];
    var preference_group_fil = preference_group.filter(function (a) {
      return a != null;
    });
    var policy_group_fil = policy_group.filter(function (b) {
      return b != null;
    });
    
    var mergeVars = {
       "CITY": data.city,
       "groupings":[ 
           { 
                 name:"Policy",
                 groups:policy_group_fil
            },
            { 
                 name:"Preferences",
                 groups:preference_group_fil
            }
         ] 
    };
    ematics("subscribe","", data.email, mergeVars, function(e){
     if (e["error"] == 0) { 
       // Success
       console.log("success");
       sessionStorage.removeItem("data"); //Remove all session data once done
     } else { 
       // Error
       console.log(e["errorMessage"])
     }
    });
</script>