![\"\"](\"https:\/\/gaconnector.com\/blog\/wp-content\/uploads\/2017\/03\/UTM-Parameters-300x251.png\")
<\/p>\n<\/p>\n
This guide shows you how to track UTM parameters in Salesforce Web-to-Lead forms.<\/p>\n
Salesforce Web-to-Lead forms are great at creating leads in Salesforce\u00a0for each submission. But they don’t tell you where your leads come from.<\/p>\n
In this article we’re going to explain how you can track UTM parameters in Salesforce<\/span> and have a section like this for\u00a0each of your Leads:<\/p>\n Example of tracking UTM parameters in Salesforce Web-to-Lead forms<\/p><\/div>\n You’ll also be able to build Salesforce dashboards with UTM information. Salesforce report breaking out the number of qualified leads by Adwords campaign<\/p><\/div>\n Let’s say this is your Web-to-Lead form:<\/p>\n This is just an example – yours will look differently.<\/p>\n To bring UTM fields to Salesforce, you need to do three things:<\/p>\n First, you need to add five new custom fields to Salesforce: UTM Source, UTM Medium, UTM Term, UTM Campaign, UTM Content.<\/p>\n The JavaScript code\u00a0in step 3 will fill in these fields with the appropriate values.<\/p>\n To create these fields, go to Salesforce and click <\/span>Setup<\/b>. This will open a search field. Search for the word “Lead” and select <\/span>Fields <\/b>from the results.<\/span><\/p>\n Salesforce Lead fields search screenshot<\/p><\/div>\n Then scroll down to Lead Custom Fields & Relationships<\/strong>\u00a0and click New<\/strong>:<\/p>\n Custom Lead fields in Salesforce<\/p><\/div>\n Choose field type Text<\/strong>:<\/p>\n Salesforce – Choose new custom field type<\/p><\/div>\n Set Field label<\/strong>\u00a0to \u201cUTM Source\u201d, and Length to 255 (Salesforce fills in Field Name for you):<\/p>\n Set UTM source fields parameters in Salesforce<\/p><\/div>\n Click Next<\/strong>, and then Save & New<\/strong>.<\/p>\n Repeat this process four more times, creating the following fields<\/span>:<\/p>\n If you also want to know the source\/medium\/term\/etc of each opportunity or account, do the following:<\/p>\n Salesforce – Map UTM fields from Lead to other objects<\/p><\/div>\n On this page, you will be able to map the Lead fields to the corresponding Account\/Opportunity fields. This will add the UTM fields to the Account and\/or Opportunity objects.<\/span><\/p>\n In\u00a0step 1, you created custom fields to store UTM parameters in Salesforce. Now we’re going to add the same fields to your Web-to-Lead forms.<\/p>\n To do this, go to Salesforce – Setup – Web-to-Lead, and click “Create Web-to-Lead Form”:<\/p>\n Salesforce Web-to-lead form create button<\/p><\/div>\n Find the UTM fields you\u00a0<\/span>just<\/span><\/span> created in the \u201cAvailable fields\u201d section. Then, move them to \u201cSelected Fields\u201d using the arrow buttons between sections.<\/span><\/p>\n Click \u201cGenerate\u201d and Salesforce will create a new Web-to-Lead form for you:<\/p>\n Sample Salesforce Web-to-Lead form<\/p><\/div>\n Don’t worry, you don’t need to replace your existing forms with this new form.<\/p>\n In the form just generated, you should see the following block of code:<\/span><\/p>\n Take the input name (e.g. 00N5800000Bew3F<\/em>) and add it to <\/span> this template:<\/p>\n In this example, the input name is 00N5800000Bew3F<\/em>, but in your form it will be different.<\/p>\n <\/p>\n Repeat this process for all five fields, and as a result.\u00a0Your end result should be a<\/span> block of code like this:<\/p>\n In this example, the input name is 00N5800000Bew3F, but in your form, it will be different.<\/p>\n <\/p>\n Then put this\u00a0block of code in<\/span> your Web-to-Lead form, just above the closing <\/form> tag:<\/p>\n <\/p>\n Congratulations! You have completed the most time-consuming steps, 1 & 2. Only one more step to go!<\/p>\n At this point<\/span>, you already have UTM fields\u00a0in both Salesforce and your forms.<\/p>\n Plus, you don\u2019t need to worry about synchronizing these fields because it happens automatically.<\/span> As a final step, put this JavaScript code somewhere on your page:<\/p>\n <\/p>\n You can put it inside a Google Tag Manager tag if you’d like.<\/p>\n Congratulations! You have completed the most time-consuming steps, 1 & 2. Only one more step to go!![\"Example](\"https:\/\/gaconnector.com\/blog\/wp-content\/uploads\/2017\/03\/vistorinfo.png\")
\nAs a result, you’ll see which campaigns generated the most sales:<\/p>\n![\"Salesforce](\"https:\/\/gaconnector.com\/blog\/wp-content\/uploads\/2017\/03\/adwords-dashboard.png\")
<form action=\"https:\/\/www.salesforce.com\/servlet\/servlet.WebToLead?encoding=UTF-8\" method=\"POST\">\r\n\r\n<input type=hidden name=\"oid\" value=\"00D58000000Kwkv\">\r\n<input type=hidden name=\"retURL\" value=\"http:\/\/gg.com\">\r\n\r\n<label for=\"first_name\">First Name<\/label><input id=\"first_name\" maxlength=\"40\" name=\"first_name\" size=\"20\" type=\"text\" \/><br>\r\n<label for=\"last_name\">Last Name<\/label><input id=\"last_name\" maxlength=\"80\" name=\"last_name\" size=\"20\" type=\"text\" \/><br>\r\n<label for=\"email\">Email<\/label><input id=\"email\" maxlength=\"80\" name=\"email\" size=\"20\" type=\"text\" \/><br>\r\n<label for=\"company\">Company<\/label><input id=\"company\" maxlength=\"40\" name=\"company\" size=\"20\" type=\"text\" \/><br>\r\n<label for=\"city\">City<\/label><input id=\"city\" maxlength=\"40\" name=\"city\" size=\"20\" type=\"text\" \/><br>\r\n<label for=\"state\">State\/Province<\/label><input id=\"state\" maxlength=\"20\" name=\"state\" size=\"20\" type=\"text\" \/><br>\r\n\r\n<input type=\"submit\" name=\"submit\">\r\n\r\n<\/form>\r\n<\/pre>\n
\n
Step 1 – Add new fields to Salesforce<\/h2>\n
![\"Salesforce](\"https:\/\/gaconnector.com\/blog\/wp-content\/uploads\/2017\/03\/lead-fields-sf-235x300.png\")
![\"Custom](\"https:\/\/gaconnector.com\/blog\/wp-content\/uploads\/2017\/03\/create-new-lead-fields.png\")
![\"Salesforce](\"https:\/\/gaconnector.com\/blog\/wp-content\/uploads\/2017\/03\/3c5b52a0f96b24a48b3ffb83b8f26f4f.png\")
![\"Set](\"https:\/\/gaconnector.com\/blog\/wp-content\/uploads\/2017\/03\/cc4b71b489c32f4e5dd9eaed29f06427.png\")
\n
\n
![\"Salesforce](\"https:\/\/gaconnector.com\/blog\/wp-content\/uploads\/2017\/03\/c2ed25a8774efcb8b85e9597d66eda9d.png\")
Step 2\u00a0– Add new\u00a0fields to the forms<\/h2>\n
Generate the code for new fields in Salesforce<\/h4>\n
![\"Salesforce](\"https:\/\/gaconnector.com\/blog\/wp-content\/uploads\/2017\/03\/784fa20c62d8c11d7c3b6260b8c00b51.png\")
![\"Sample](\"https:\/\/gaconnector.com\/blog\/wp-content\/uploads\/2017\/03\/968b3a4a5420b8920f2c56b77d604602.png\")
\nYou <\/span>just<\/span><\/span> need to:<\/span><\/div>\n<\/div>\n\na) extract the UTM fields from this new form, and<\/span><\/div>\n<\/div>\n\nb) put them inside the existing Web-to-lead forms on your website.<\/span><\/div>\n<\/div>\nUTM Source:<input id=\"00N5800000Bew3F\" maxlength=\"255\" name=\"00N5800000Bew3F\" size=\"20\" type=\"text\" \/><br><\/pre>\n
Put the code\u00a0for the new fields in your form(s)<\/strong><\/h4>\n
<input id=\"utm_source\" name=\"00N5800000Bew3F\" type=\"hidden\" \/><\/pre>\n
<input id=\"utm_source\" name=\"00N5800000Bew3F\" type=\"hidden\" \/>\r\n<input id=\"utm_medium\" name=\"00N5800000Bew3G\" type=\"hidden\" \/>\r\n<input id=\"utm_campaign\" name=\"00N5800000Bew3H\" type=\"hidden\" \/>\r\n<input id=\"utm_term\" name=\"00N5800000Bew3I\" type=\"hidden\" \/>\r\n<input id=\"utm_content\" name=\"00N5800000Bew3J\" type=\"hidden\" \/><\/pre>\n
<form action=\"https:\/\/www.salesforce.com\/servlet\/servlet.WebToLead?encoding=UTF-8\" method=\"POST\">\r\n\r\n<input type=hidden name=\"oid\" value=\"00D58000000Kwkv\">\r\n<input type=hidden name=\"retURL\" value=\"http:\/\/gg.com\">\r\n\r\n<label for=\"first_name\">First Name<\/label><input id=\"first_name\" maxlength=\"40\" name=\"first_name\" size=\"20\" type=\"text\" \/><br>\r\n<label for=\"last_name\">Last Name<\/label><input id=\"last_name\" maxlength=\"80\" name=\"last_name\" size=\"20\" type=\"text\" \/><br>\r\n<label for=\"email\">Email<\/label><input id=\"email\" maxlength=\"80\" name=\"email\" size=\"20\" type=\"text\" \/><br>\r\n<label for=\"company\">Company<\/label><input id=\"company\" maxlength=\"40\" name=\"company\" size=\"20\" type=\"text\" \/><br>\r\n<label for=\"city\">City<\/label><input id=\"city\" maxlength=\"40\" name=\"city\" size=\"20\" type=\"text\" \/><br>\r\n<label for=\"state\">State\/Province<\/label><input id=\"state\" maxlength=\"20\" name=\"state\" size=\"20\" type=\"text\" \/><br>\r\n\r\n<!-- NEW FIELDS BEGIN -->\r\n<input id=\"utm_source\" name=\"00N5800000Bew3F\" type=\"hidden\" \/>\r\n<input id=\"utm_medium\" name=\"00N5800000Bew3G\" type=\"hidden\" \/>\r\n<input id=\"utm_campaign\" name=\"00N5800000Bew3H\" type=\"hidden\" \/>\r\n<input id=\"utm_term\" name=\"00N5800000Bew3I\" type=\"hidden\" \/>\r\n<input id=\"utm_content\" name=\"00N5800000Bew3J\" type=\"hidden\" \/>\r\n<!-- NEW FIELDS END -->\r\n\r\n<input type=\"submit\" name=\"submit\">\r\n\r\n<\/form>\r\n<\/pre>\n
\nThere’s just one missing piece. You need to insert the code that will populate these fields with actual UTM values.<\/p>\nStep 3\u00a0–\u00a0Populate hidden fields with values (using JavaScript)<\/h2>\n
<script type=\"text\/javascript\">\r\nfunction parseGET(param) {\r\n var searchStr = document.location.search;\r\n try {\r\n var match = searchStr.match('[?&]' + param + '=([^&]+)');\r\n if (match) {\r\n var result = match[1];\r\n result = result.replace(\/\\+\/g, '%20');\r\n result = decodeURIComponent(result);\r\n return result;\r\n } else {\r\n return '';\r\n }\r\n } catch (e) {\r\n return '';\r\n }\r\n}\r\n\r\ndocument.getElementById('utm_source').value = parseGET('utm_source');\r\ndocument.getElementById('utm_medium').value = parseGET('utm_medium');\r\ndocument.getElementById('utm_campaign').value = parseGET('utm_campaign');\r\ndocument.getElementById('utm_term').value = parseGET('utm_term');\r\ndocument.getElementById('utm_content').value = parseGET('utm_content');\r\n<\/script><\/pre>\n
\nBy now, you already have UTM fields both in Salesforce and your forms.
\nPlus, these fields get automatically synchronized. So you don’t need to worry about that.
\nThere’s just one missing piece left. You need to insert the code that will populate these fields with actual UTM values.<\/p>\nBonus Step 4<\/h2>\n
![\"GA](\"https:\/\/gaconnector.com\/blog\/wp-content\/uploads\/2017\/03\/gaconnector-section.png\")