Import data from web forms

The Xtremepush web SDK has a user import method which can be used to import data from web forms. Details are given on the method below. This is followed by usage examples for collecting form data from a page with local JavaScript or using Google Tag manager, and for collecting form data from a landing page built with a third party solution.

User Import method

This method sets user profile data. Multiple default and custom attributes can be updated at one time. This is the web SDK equivalent of the import profile API method. It can be used to import/update user profile data with values submitted in forms.

The user import method is used to import one or more attributes using the following format:

xtremepush('user', 'import', profile_params, success, error);

The profile params object should use JSON in the format, as shown in the following example

{
'user_id': id, //required
'email': email, // setting an email using the default email profile attribute
'email_subscription': 1, //setting the default email_subscription attribute
'first_name': fname, // an example of setting a custom attribute
'last_name': lname, // an example of setting a custom attribute
}

When importing data you must target existing system or custom attributes. Below we have a number of usage examples for importing form data with this method. These examples cover the following: using JavaScript directly added to your site, using Google Tag Manager and using the import method with a third party landing page provider.

Import data using Local JavaScript

Below is some sample javascript using the import method to gather data from a form by adding javascript locally on the form page. In this example, a listener is set to look out for a form submission event. When the form event fires the form data is stored in a local variable and the user import method is called. Within the user import method individual fields are accessed from the form data and assigned to attributes.

<script type="text/javascript">
document.getElementById('form-14-form-3').addEventListener('submit', function(e) {
e.preventDefault();
let x = document.getElementById('form-14-form-3').elements;
xtremepush('user', 'import', {
'user_id': x['emailField'].value,
'email': x['emailField'].value,
'email_subscription': 1,
'first_name': x['fnameField'].value,
'last_name': x['lnameField'].value
}, function() {
console.log("import success");
}, function(e) {
console.log(e);
});

});
</script>

Import data using Google Tag Manager

To gather form data with code added via Google Tag Manager you would add a tag on GTM that triggers on the form submit. Form submit is a standard GTM trigger type. The tag type should be a custom HTML tag. Below is an indicative sample of the javascript using the import method you might place in the the custom HTML tag. The approach is similar to the local javascript approach above but you do not need to use an event listener as the GTM trigger takes the place of the event listener. In this example we also use a small helper function to help retrieve the values from the form fields.

<script type="text/javascript">
fname = getFormField("input[name=fname]");
lname = getFormField("input[name=lname]");
email = getFormField("input[name=email]");

xtremepush('user', 'import', {
'user_id': email,
'email': email,
'email_subscription': 1,
'first_name': fname,
'last_name': lname,
}, function() {
console.log("import success");
}, function(e) {
console.log(e);
});

function getFormField(field_name){
var field = {{Form Element}}.querySelector(field_name);
console.log(field);
return field ? field.value : undefined;
}
</script>

Import data using a third-party landing page solution

Most mature third-party landing page solutions offer the capability to add custom scripts to your landing pages. This allows you to add the Xtremepush SDK and to use the user import method to capture form data from landing pages with forms. Details on how to do this can be found below.

Typically, landing pages will appear on a subdomain. If your domain is https://www.example.com, you may use the subdomain join.example.com for landing pages with forms for joining your newsletter mailing lists). Before you can import data you will first need to add the Xtremepush SDK to your landing pages. Review instructions on how to do so from our dedicated guides. If the landing page web domain is not listed in the list of HTTP origins for your website configuration in your project on Xtremepush you will need to add it in Settings > Apps & sites > click on the matching app or website > Settings. These are the settings which would have been configured when the website integration was initially set up.

Once that is done you can simply add the SDK integration code to your landing pages using your third-party landing page solutions custom script capability. Below you can see an example of this with the unbounce landing page solution

In this scenario, you use similar JavaScript to the local example above, which includes a listener set to look out for a form submission event.

Below is the JavaScript used in the above example.

<script type="text/javascript">
document.getElementById('form-14-form-3').addEventListener('submit', function(e) {
e.preventDefault();
let x = document.getElementById('form-14-form-3').elements;
xtremepush('user', 'import', {
'user_id': x['emailField'].value,
'email': x['emailField'].value,
'email_subscription': 1,
'first_name': x['fnameField'].value,
'last_name': x['lnameField'].value
}, function() {
console.log("import success");
}, function(e) {
console.log(e);
});

});
</script>

The script imports data from a simple landing page for newsletter signup.