Solved

Looking for an easy way to capture newsletters subscribers using a form on my landing page

  • 23 January 2020
  • 9 replies
  • 185 views

I’m looking for an easy way to capture newsletters subscribers using a form on my HTML/JS landing page. Right now, I have a simple form that sends the data to Mailchimp. I now have to export subscribers from Mailchimp and manually import them in Mixpanel. This has two downsides:

  • it creates duplicate profiles as I have no distinct_id to match with users who are already in Mixpanel (because they’ve signed up inside the mobile app we’re offering)
  • it takes a lot of time

Is there a way to change the form so that new subscribers end up directly in Mixpanel, without creating duplicate profiles? 

icon

Best answer by raja 29 January 2020, 23:30

In your VueJS code you have a ‘submit’ method for the Mailchimp form, it looks a bit like my screenshot below.

In the function I highlighted above in the screenshot is where you would write the Mixpanel JS SDK ccode to create the user profile, here is the JS SDK doc that explains how to do that.

View original

9 replies

Userlevel 1
Badge

Depending on how the form is coded, you could make a on-click event on the form submission button that also triggers a Mixpanel JS SDK call with the profile information. That should keep the current functionality of the form working as-is, but also send it to Mixpanel.

Thank you, could you provide an example based on the below form html (Vue) that also checks if the email address already exists in the Mixpanel database?

 

<form @submit.prevent="submit" action="https://xxxxxxx.us19.list-manage.com/subscribe/post?u=xxxxxx&amp;id=xxxxx"
method="post" novalidate="true" target="_blank">
<input class="follow__naam" placeholder="First name" data-vv-delay="800" v-model="naam" type="text" id="mce-FNAME"
name="FNAME" />
<input class="follow__email" placeholder="Email address" data-vv-delay="800" v-model="email" type="email"
id="mce-EMAIL" name="EMAIL" />
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_01fe0ee45d94224cb81453f48_9c8106ac57" tabindex="-1" value />
</div>
<input type="submit" class="follow__submit" name="subscribe" id="mc-embedded-subscribe" value="Inschrijven"
:disabled="naam.length === 0 || email.length === 0" />
</form>

 

Userlevel 1
Badge

Do you have a link to the website where I can see the form in action?

Do you have a link to the website where I can see the form in action?

Sure, that’s https://knwufondo.nl (scroll to the bottom for the form)

Userlevel 1
Badge

Do you have Mixpanel JS SDK Implemented on the website homepage? I wasn’t able to find the mixpanel variable.

Do you have Mixpanel JS SDK Implemented on the website homepage? I wasn’t able to find the mixpanel variable.

Hi, it does now. Could you please check again?

Userlevel 1
Badge

In your VueJS code you have a ‘submit’ method for the Mailchimp form, it looks a bit like my screenshot below.

In the function I highlighted above in the screenshot is where you would write the Mixpanel JS SDK ccode to create the user profile, here is the JS SDK doc that explains how to do that.

Thanks, I understand but can you tell me if it’s possible to detect (based on e-email address) if a user already exists in the MP database, and if so, update a property, and otherwise create a new profile?

Userlevel 1
Badge

Thanks, I understand but can you tell me if it’s possible to detect (based on e-email address) if a user already exists in the MP database, and if so, update a property, and otherwise create a new profile?

mixpanel.identify combined with people.set_once already handles this automatically -- you could use a hash of the email address as the distinct_id.

people.set_once: set properties on a user record, only if they do not yet exist. This will not overwrite previous people property values, unlike people.set().

However, calling the people.set with the same distinct_id for identify() will overwrite the existing data for that people profile for the distinct_id

Reply