How To
How to Capture UTM Parameters in Webflow Forms?
Any sustainable business growth must identify which parts of the business strategy generate the best customers with a positive ROI to focus on the marketing channels that work and ditch those that don’t.
Though if you can’t measure which marketing campaigns generate leads and customers, how will you know where to focus your time and resources?
B2B and other businesses that rely on lead generation can easily measure marketing performance by tracking the UTM source of every lead in your CRM.
This post demonstrates how to capture UTM parameters in Webflow Forms and send that data in the form fields to display them inside your CRM for reporting.
Also read: how to reject non-business emails from Webflow form submissions?
Capture and push UTM to any form in Webflow + store parameters in a cookie when users move from one page to another
Copy-Paste Before body (Per page or entire website)
The code structure:
- Get URL parameters.
- Get Webflow form elements by jquery class selector and set the value to this UTM param X.
- It’s useful to store UTM params inside a cookie (To keep the UTM also if the user goes from page X to Y).
<!-- https://github.com/js-cookie/js-cookie -->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<!-- tribal code -->
<script>
const my_utmParameters = [
"utm_source",
"utm_medium",
"utm_campaign"
];
function getAllUrlParams(url) {
let obj = Object.fromEntries(new URLSearchParams(location.search));
return obj;
}
/* Check if Lead Cookie already exist */
var cookieExist = Cookies.get('Lead'); // => if false return undefined
/* get URL params object */
var getAllUrlParams = getAllUrlParams(); // return object
/*Convert a JavaScript object into a string */
var getAllUrlParamsJSON = JSON.stringify(getAllUrlParams);
/* Check if the url with utm_parameters */
let isEmpty = jQuery.isEmptyObject(getAllUrlParams); // return true/false
/* Case 1 - if the page with parameters & no cockie exsist */
if(!isEmpty && cookieExist === undefined){
/* Set lead object for the cockies */
console.log("Case 1 - parameters & no cockie exsist => Create Cockie");
/*
## Set Cookies ##
expires: If omitted, the cookie becomes a session cookie (This example)
*/
createLead();
setUTMformValues();
}/*end if*/
let compare = is_this_utm_equal_to_cockie_utm_values();
if(!isEmpty && cookieExist !== undefined){
/* it this utm params diff from current lead values create new lead*/
if(!compare){
/* Case 3 - cockie already exsist but with diff values Vs url utm parmas
(remove current Lead and generate new one)
*/
console.log("Case 3 - lead Exist, but with diff parames");
Cookies.remove('Lead');
createLead();
setUTMformValues();
}else{
console.log("Case 2 - lead exsist with this params");
setUTMformValues();
}
}
/* Case 4 - cookie Exist but page without any utm param */
if(isEmpty && cookieExist !== undefined){
console.log("Case 4 - cookie Exist but page without any utm param");
setUTMformValues();
}
function createLead(){
var lead = {
parameters: getAllUrlParams
};
/* if you want to add 2 days expires for example:
Cookies.set('Lead', 'lead', { expires: 2})
*/
Cookies.set('Lead', lead, { });
}
/* check if this utm url equal to the current values of cockie lead */
function is_this_utm_equal_to_cockie_utm_values(){
for (const this_utm_element of my_utmParameters) {
/* if utm_source exist */
let value_exsist = JSON.parse(cookieExist).parameters[this_utm_element] == getAllUrlParams[this_utm_element];
//console.log(`${value_exsist} - ${JSON.parse(cookieExist).parameters[this_utm_element]} compare to: ${getAllUrlParams[this_utm_element]}`);
if(value_exsist == false){
return false;
}
}/* end for loop */
return true;
}
function setUTMformValues(){
/* webflow form object (Add embed code under webflow designer inside FORM */
/*
<input type="text" class="utm_source" placeholder="utm_source" name="utm_source">
<input type="text" class="utm_medium" placeholder="utm_medium" name="utm_medium">
<input type="text" class="utm_campaign" placeholder="utm_campaign" name="utm_campaign">
*/
/* the value if the param is empty */
const empty_param_case = "null";
/* set feilds */
for (const this_utm_element of my_utmParameters) {
/* if utm_source exist */
set_utm_feild(this_utm_element);
}/* end for loop */
/* inner function */
function set_utm_feild(utm_type){
let utm_value = JSON.parse(Cookies.get('Lead')).parameters[utm_type];
let utm_nodes = document.getElementsByClassName(utm_type);
/* change all utm form feilds */
if(utm_nodes.length > 0){
for(var i = 0; i < utm_nodes.length; i++)
{
if(!!utm_value && utm_value !== undefined){
utm_nodes[i].value = utm_value;
}
else{
/* empty param for example ?utm_campaign= or ?utm_campaign */
utm_nodes[i].value = empty_param_case;
}
}/* end for */
}/* end if */
}// end inner set_utm_feild function */
}
</script>
Populate UTM parameters in a hidden field inside the form
To do that, insert an embed element inside the form, then add the following javascript code.
<script></script> <input type="hidden" class="utm_source" placeholder="utm_source" name="utm_source"> <input type="hidden" class="utm_medium" placeholder="utm_medium" name="utm_medium"> <input type="hidden" class="utm_campaign" placeholder="utm_campaign" name="utm_campaign">
You can repeat the second step in any form across your website, and you will receive UTM parameters from your marketing campaigns or affiliate links inside your form submissions.
Credit: Siton_Systems
A URL Shortener is a technique in which a URL may be made shorter and still redirect to the original long page.
Most URL Shorteners are free and easy to use but come with limitations.
Google shut down its Google URL Shortener in 2018 with continued support until March 30, 2019. However, all existing links will continue to redirect to the intended destination.
Top URL Shortener Services on the Internet
1. Bitly.com
Bitly offers a free and enterprise version of its URL shortening service. No signup necessary, but creating an account allows you to manage links quickly and change the short link characters if you wish.
According to this Quora answer, the enterprise version of Bitly costs around $995/month.
Pro Tip: add + after the short link to access analytics of any bitly link. bitly.com/link+
2. TinyURL
A simple shortener that requires no sign-up and allows users to customize the keyword. The service is free to use, but there is no analytics.
3. Short.io
The best shorten link provider so far, it has so many useful features such as google analytics integration, bulk import, broken links detection, built-in analytics with so many details, link cloaking, and more.
Cost: affordable compared to similar solutions.
4. Rebrandly
Rebrandly is one of the popular URL shortener services in the market. It’s the most complete and reliable link management platform. Their solution provides the easiest way to create, measure, and manage short URLs with a custom domain name.
You can buy your domain name using Rebrandly, tag your URLs using UTM tagging, allow social media pixels to optimize for conversions, and more.
It’s expensive compared to other solutions.
5. eg.gd
eg.gd is a new URL shortener service that offers the same as rebrandly but for free. It was launched last year when bit.ly service was blocked in Egypt.
In the course of my professional endeavors, I consistently inquire about the origins of information, the methods by which our audience discovers us, and the roots of potential leads. These inquiries, among others, are integral to unraveling the complexities of the marketing funnel.
A commonplace challenge encountered by numerous marketers on a daily basis revolves around a pivotal question: which blog post proves most effective in generating leads and conversions?
If you have a blog on Webflow that includes a lead gen form or a newsletter form in all blog posts, when you receive an email from one of the forms – of course, you have to find out the URL of the respective page. This way, you can detect the top converting posts.
I’ve been searching for a solution here and there and finally found it. So, I thought to share it here.
How to automatically include the current URL in the webflow form?
- Add an embed code before the submit button of your lead generation form or any other form type – make it hidden, and insert the following code into it then save.
- The javascript code you need to make this work:
<script type="text/javascript"> window.onload=function()
{document.getElementById('pageurl').value = window.location.href;} </script>
<input type="hidden" id="pageurl" name="pageurl" value="pageurl" />
3. Once published, any new form submission will have a new column called “pageurl” so you can detect the source page of this submission.
Follow us for more Webflow hacks.
In the ever-evolving world of digital marketing, staying ahead of the curve is paramount. One essential factor that often flies under the radar is Google’s E-A-T principle, which stands for Expertise, Authoritativeness, and Trustworthiness. This principle, now upgraded to E-E-A-T to include Experience, plays a pivotal role in enhancing website credibility and user experience.
In this article, we’ll delve into how understanding and implementing E-E-A-T can significantly influence your search engine rankings.
Unearthing the Essence of Google E-E-A-T
E-E-A-T is an acronym that encapsulates the qualities Google values when assessing the quality of online content. While it might not be explicitly mentioned in Google’s 200 known ranking factors, it holds undeniable significance in the eyes of quality raters and SEO professionals alike.
Expertise: Mastering Your Domain
Expertise is the cornerstone of E-E-A-T. It revolves around showcasing your in-depth knowledge and proficiency in your niche. To demonstrate your expertise effectively, consider these strategies:
1. Comprehensive Subject Mastery: Your content should reflect a deep understanding of your subject matter, leaving no room for ambiguity.
2. Credentials and Qualifications: Display relevant qualifications and credentials to bolster your credibility.
3. Proven Track Record: Highlight your past accomplishments and successes, as they can instill trust in your audience.
4. Research and Data: Stay updated with the latest research and trends in your field and back your content with accurate data.
5. Niche Specialization: Focus on a specific niche to establish yourself as an expert in that area.
6. Active Contribution: Contribute to your field by publishing content, and research papers, speaking at relevant events, or joining professional organizations.
Experience: Real-World Application Matters
Experience complements expertise by emphasizing practical, real-world application. To convey your experience effectively, consider these tactics:
1. Practical Application: Apply your knowledge in real-world scenarios and showcase your problem-solving skills.
2. Case Studies: Present real-world examples and results to illustrate your expertise in action.
3. Success Stories: Share stories of achievements or satisfied clients to instill confidence in your abilities.
4. Portfolio Display: For creative fields, such as design, art, or writing, showcase your previous work to demonstrate your experience.
5. Knowledge Demonstration: Stay updated with industry best practices, trends, and new developments, and share your insights through blog posts, articles, or speaking engagements.
6. Customer Testimonials: Positive testimonials from satisfied customers provide social proof of your expertise.
Authoritativeness: Building a Trustworthy Reputation
Authoritativeness centers on establishing your website as a reliable source of information within your niche. To enhance your authoritativeness, consider the following strategies:
1. Backlinks and Citations: Earn backlinks from authoritative websites in your industry, a strong signal of your website’s trustworthiness.
2. Awards and Recognition: Credible recognition, such as awards and certifications, contributes to your reputation.
3. Thought Leadership: Demonstrate authority through original research or innovative ideas, and engage in industry discussions.
4. Collaboration with Experts: Collaborate with recognized experts in your field through co-authored articles or speaking engagements.
5. Strong Social Media Presence: Engage with your audience on social media platforms to establish yourself as an authoritative figure.
6. Consistent, Relevant Content: Create high-quality content consistently to build credibility with users and search engines.
Trustworthiness: The Bedrock of Credibility
Trustworthiness is the final piece of the E-E-A-T puzzle, focusing on the credibility of your website’s information. To foster trustworthiness, adhere to these guidelines:
1. Transparency: Be transparent about your brand, contact details, business operations, and the purpose of your content.
2. Provide Accurate Information: Ensure your content is factually correct and up-to-date, and avoid misleading practices.
3. Ethical Practices: Follow ethical guidelines, respect user privacy, handle sensitive data responsibly, and comply with relevant laws.
4. User Experience and Security: Create a positive user experience and prioritize website security with HTTPS connections.
5. Customer Testimonials and Reviews: Genuine testimonials from satisfied customers bolster your website’s trustworthiness.
6. Customer Support: Offer prompt and helpful customer support to engage with your audience effectively.
7. Disclosure of Affiliations: Clearly disclose any affiliations or sponsorships that might impact your content.
While Google’s Quality Rater Guidelines may not explicitly mention E-E-A-T, adhering to these principles can significantly improve your website’s credibility and user experience. Remember, achieving higher SERP rankings requires a holistic approach, and understanding and implementing E-E-A-T is a valuable piece of the puzzle.
If you need expert guidance, consider enlisting the support of professional SEO services to help you navigate this ever-changing landscape.
-
Startups9 years ago3 Creative Egyptian Women Who Master E-commerce
-
News10 years ago11 Talented Egyptian Photographers on Instagram
-
Campaigns8 years agoVodafone Egypt Brings Generations Together, Unlocks 4G Power
-
Marketing9 years agoWhich categories will suffer most from increased prices in Egypt?
-
Apps8 years agoRadio Garden Live Map of The Globe’s Radio Stations
-
News8 years agoTop 10 Egyptian Fashionistas to Follow on Instagram
-
Campaigns8 years ago7 Big Stats That Show Which Ramadan Advertisements Resonated Most
-
Opinion9 years agoF*** Being a Founder, Be a Follower