Attributer is a tool that passes through marketing attribution data (like the fact a lead came from Paid Search, Organic Search, Paid Social, etc) with each form submission. With Attributer, you can:
- See the source of every lead in the Tally Forms submissions page
- Include the data in email notifications so you can see where each lead has come from right from within your inbox
- Send the data into your CRM so you can track leads, customers & revenue by campaign or channel
- Send the data into a spreadsheet to create charts and graphs
Should I use Attributer?ProsConsSetup InstructionsStep 1: Add the Attributer code to your websiteStep 2: Add hidden fields to your Tally FormsStep 3: Copy & modify the embed codeStep 4: Add the modified embed code to your website
Should I use Attributer?
It is possible to capture UTM parameters in Tally Forms using hidden fields, so how does Attributer compare?
Pros
- Attributer captures information on leads that come from organic channels like Organic Search, Organic Social, Referral, etc so you get attribution information on all your leads
- Attributer remembers the UTM parameters and attribution data as visitors browse your site, meaning you’ll get more accurate data on how many leads you are getting from your various ad campaigns
- Attributer passes through landing page data as well, so you can track how many leads you are getting from your blog (for instance)
Cons
- Attributer is a 3rd-party product that has it’s own pricing
Setup Instructions
Follow the step by step instructions below to start using Attributer with Tally Forms.
Step 1: Add the Attributer code to your website
The first step is to add the Attributer code to your website.
When you create an Attributer account, you will be given a snippet of code to add to your website. The process for doing so differs depending on what CMS system you are using:
Step 2: Add hidden fields to your Tally Forms
To add the first hidden field to the form, click where in the form you want to add it (we recommend adding it underneath the last visible form field) and type
/hidden. Then select ‘Hidden field’ from the dropdown that appears.
This will add a new hidden field to the bottom of your form.
You then need to give it a specific name. To do that, simply type ‘channel’ into the box that appears.
That’s it! You have now successfully added the first hidden field.
Now you need to repeat the above process to add an additional 5 fields to your form. The configuration for each of these additional fields is as follows:
Hidden field | Name |
Hidden Field #2 | channeldrilldown1 |
Hidden Field #3 | channeldrilldown2 |
Hidden Field #4 | channeldrilldown3 |
Hidden Field #5 | landingpage |
Hidden Field #6 | landingpagegroup |
You ultimately want your form to look a bit like this:
Finally, click the ‘Publish’ button at the top of the page to save the changes to your form.
Step 3: Copy & modify the embed code
Now that you have added the hidden fields, it’s time to embed the form on your website.
Navigate back to the overview page for your form and click the ‘Share’ tab before selecting the
Standard embed option.When the Embed page loads, click the ‘Get the Code’ button to access the embed code for your form.
Finally, copy the code that appears in the top right corner.
Now you just need to make a tiny tweak to the code. The best way to do this is to pase the cod einto some sort of text editor (like a Google Doc, Microsoft Word Doc, or the Notes app on your computer).
You first want to remove the words ‘data-tally-‘ from the opening line and replace it with the words ‘data-attributer-iframe’
So if your code previously looked like this:
<iframe data-tally-src="https://tally.so/embed/3lB5BX?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" loading="lazy" width="100%" height="200" frameborder="0" marginheight="0" marginwidth="0" title="Contact Form"></iframe><script>var d=document,w="https://tally.so/widgets/embed.js",v=function(){"undefined"!=typeof Tally?Tally.loadEmbeds():d.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((function(e){e.src=e.dataset.tallySrc}))};if("undefined"!=typeof Tally)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}</script>
You would want to change it so that it looked like this:
<iframe data-attributer-iframe src="https://tally.so/embed/3lB5BX?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" loading="lazy" width="100%" height="200" frameborder="0" marginheight="0" marginwidth="0" title="Contact Form"></iframe><script>var d=document,w="https://tally.so/widgets/embed.js",v=function(){"undefined"!=typeof Tally?Tally.loadEmbeds():d.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((function(e){e.src=e.dataset.tallySrc}))};if("undefined"!=typeof Tally)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}</script>
What you are essentially doing here is giving the iFrame a name (you are naming it ‘data-attributer-iframe’) which Attributer can then look for and write the data into.
The reason you need to do this is that an iFrame is essentially a window that shows another page on your website. So when you insert the form via an iFrame you are not actually adding the form to your website, but instead you are adding a window to your website and the form displays inside it.
So you need to give this iFrame a specific name so that Attributer can look for it and know how to write the data to the form inside it.
Step 4: Add the modified embed code to your website
Now that you have modified the embed code and given the iFrame a name, you can paste it onto your website where you want your form to be.
Need help?
We understand modifying code can be a little bit tricky, and the Attributer team are always happy to help.
You can contact them here or even book a time to jump on a call and they can go through the setup process with you.