This guide show how to set up Attributer with forms in Squarespace’s “Fluid Engine” editor. If you’re using Squarespace’s classic editor, see the instructions here.
Attributer is a powerful tool that you can integrate into your website. It tracks the sources of your website visitors, such as paid search, paid social, organic search, and more, and captures this data in hidden fields within your forms. This information can then be seamlessly transferred to your CRM and other marketing tools.
To get started, you need to add several hidden fields to your Squarespace forms. Follow these steps to complete the process:
Step 1: Adding Hidden Fields to Your Form
1. Access Your Form in Squarespace
Log in to your Squarespace account and navigate to the page containing your form. Select the form on the page to open a small popup window. Ensure that the “Content” tab is active, and then click on “Edit Form Fields”.
2. Add New Fields
Once the popup updates, you will see a list of your existing form fields along with an option to “Add Field”. Click on this option.
3. Select the Hidden Field Type
You will be presented with various types of form fields. Choose the “Hidden” field type to add it to your form.
4. Repeat for a Total of Six Hidden Fields
Repeat the above process six times to add a total of six hidden fields to your form.
Step 2: Configuring the Hidden Fields
With the hidden fields now added to your form, the next step is to configure them so that Attributer can accurately write the marketing attribution data to the correct fields.
1. Select a Field for Configuration
In the popup window, click on one of the hidden fields you’ve added to access its configuration options.
2. Edit Field Settings
The popup will update to display the configuration settings for the selected field. You will need to edit both the “Label” and “Default Value” fields.
For each of the six hidden fields you’ve added, follow the specific configuration instructions provided below to ensure they are set up correctly for Attributer to function effectively.
Field #1
Label = Channel
Default Value = [channel]
Field #2
Label = Channel Drilldown 1
Default Value = [channeldrilldown1]
Field #3
Label = Channel Drilldown 2
Default Value = [channeldrilldown2]
Field #4
Label = Channel Drilldown 3
Default Value = [channeldrilldown3]
Field #5
Label = Landing Page
Default Value = [landingpage]
Field #6
Label = Landing Page Group
Default Value = [landingpagegroup]
Step 3: Add Additional Code
Return to the location where you originally added the Attributer code (either the Code Injection section in your Squarespace settings or a tool like Google Tag Manager).
Paste the following code below the existing Attributer code:
<script>
(() => {
function setFormValue(params, name, value) {
const key = "SQF_" + name.toUpperCase()
if (params.has(key)) return false;
params.set(key, value);
return true;
}
function fill_form() {
if (!document.FlareTrk?.data) {
return window.requestAnimationFrame(fill_form);
}
const params = new URLSearchParams(window.location.search);
const should_update = setFormValue(params, "channel", document.FlareTrk.data.drillData.channel);
if (!should_update) {
return;
}
setFormValue(params, "channel_drilldown_1", document.FlareTrk.data.drillData.drillDown1);
setFormValue(params, "channel_drilldown_2", document.FlareTrk.data.drillData.drillDown2);
setFormValue(params, "channel_drilldown_3", document.FlareTrk.data.drillData.drillDown3);
setFormValue(params, "channel_drilldown_4", document.FlareTrk.data.drillData.drillDown4);
setFormValue(params, "gclid", document.FlareTrk.data.gclid || "");
setFormValue(params, "fbclid", document.FlareTrk.data.fbclid || "");
setFormValue(params, "msclkid", document.FlareTrk.data.msclkid || "");
setFormValue(params, "id", document.FlareTrk.data.id || "");
setFormValue(params, "landing_page", document.FlareTrk.data.landing_url);
setFormValue(params, "landing_page_group", document.FlareTrk.data.landing_page_group);
for (var dp = 0; dp < document.FlareTrk.settings.customFields.length; dp++) {
const key = document.FlareTrk.settings.customFields[dp];
setFormValue(params, key, document.FlareTrk.data["customFields"][key] || "");
}
window.location.search = "?" + params.toString();
}
fill_form();
})();
</script>Ultimately, it should look similar to this:
After pasting the code, save your changes by clicking the “Save” button in the top-left corner of the screen.
You’re all set! Attributer is now configured to store visitor marketing attribution data in the hidden fields upon form submission.
