Mailchimp Sign Up Using – Google One Tap Sign Up

Innovative Web pages are an essential part of websites. So keeping it in mind I’m going to explain how we can use google one tap sign up tool for mailchimp sign up.

For Mailchimp Signup using One Tap we need to follow below steps.

Step 1 – Add Google Sign Up Script

Step 2 – Add Sign Up call back for handle success request

Step 3 – Get data from GSI and pass it to ajax for mailchimp sign

Step 4 – Execute mailchimp API with received data.

Step 5 – Add a custom cookie if you want that user not see GSI Popup upto specific time period.

Requirements : –

1 – Google App oAuth Client Id

2 – Mailchimp API Key

3 – Mailchimp List Id

Reference URL – http://developers.google.com/identity/one-tap/web

Now I’m going to explain script execution and process.

Load One Tap Client Library –

To optimize perspective you can add async and defer attributes in it.

Now display one tap sign up popup :-

JS Script :-

jQuery(document).ready(function () {
   function handleCredentialResponse(response) {
       // Success Response Data
     // Send ajax request for mailchimp request
   }
   window.onGoogleLibraryLoad = () => {
       google.accounts.id.initialize({
           client_id: '*****************************.apps.googleusercontent.com',
           callback: handleCredentialResponse,
           cancel_on_tap_outside: false
       });
       google.accounts.id.prompt((notification) => {
          
           if (notification.getMomentType() == 'dismissed') {
               // Handle On Close and remove Sign In Popup
               google.accounts.id.cancel();
 
           }
       });
   };
});

More Details : http://developers.google.com/identity/one-tap/web/reference/js-reference

Mailchimp Subscribe – Get Data from ajax request and subscribe user in mailchimp in using API.

PHP Code :-

$post_data = json_encode([
       'email_address' => $user_email,
       'status' => 'subscribed',
       'merge_fields' => array(
           'FNAME' => $user_name,
           ),
   ]);
 
$curl = curl_init();
 
   curl_setopt_array($curl, array(
       CURLOPT_URL => "http://us6.api.mailchimp.com/3.0/lists/{listid}/members",
       CURLOPT_RETURNTRANSFER => true,
       CURLOPT_ENCODING => "",
       CURLOPT_MAXREDIRS => 10,
       CURLOPT_TIMEOUT => 30,
       CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
       CURLOPT_CUSTOMREQUEST => "POST",
       CURLOPT_POSTFIELDS => $post_data,
       CURLOPT_HTTPHEADER => array(
           "authorization: apikey mailchimp***api***key****-us6",
           "cache-control: no-cache",
           "content-type: application/json",
       ),
   ));
 
   $response = curl_exec($curl);
   $err = curl_error($curl);
 
   curl_close($curl);
     if ($err) { 
       //Something went wrong
     }else{
       // Success $response
     }

This is a basic idea how we can implement it.

We will provide wordpress plugin for this functionality as soon as possible . So keep in touch and continue reading …..

Trending now