How to prevent lazy loading from messing with your iframe embedded forms
- April 26, 2023
- Unfettered Marketing
Sometimes I come across these edge cases where a solution is discovered to an obscure or tricky problem, and I just have to share it, because if there’s even just one person out there that this article saves hours of headache, it was worth my 15 minutes to write it.
Here’s the problem in a nutshell. If you are using iframe embedded Account Engagement (Pardot) forms, one nice trick that you can use is embedding variables on the url in that iframe, it will fill in hidden (or visible) fields on your form. Here’s a simple example.
This is the original form:
<iframe src="https://info.accountengagement.com/l/1997292/2023-04-26/7vvm" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>
This is the form’s URL altered with a Salesforce campaign ID:
<iframe src="https://info.accountengagement.com/l/1997292/2023-04-26/7vvm&campaign=7014y000000usUfAAI" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0"></iframe>
The use case here might be that we use the same form on multiple locations and want to use the campaign ID to identify a specific campaign that the form in that location is associated with.
There are other tools out there like UTMGrabber (for WordPress) and UTMSimple (for anything else) that will dynamically insert variables onto the URL such as UTMs or referral links that are held in the first party cookie, which means that you can feed all kinds of useful data into your hidden fields.
This is all well and good, and works beautifully….until it doesn’t.
If your site has a plugin or javascript running that is intended for lazy-loading of site images, it has the potential to wreak havoc with your hidden field strategy, especially if you are dynamically generating the variables on the URL.
This is because your iframes have the potential of being rewritten as follows:
<iframe data-src="https://info.accountengagement.com/l/1997292/2023-04-26/7vvm" width="100%" height="500" type="text/html" frameborder="0" allowTransparency="true" style="border: 0" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="></iframe>
What’s happening here is that the actual URL is being renamed as data-src and the src is replaced by a base64 encoded 1×1 gif image. The effect of this is that the dynamic URL components get tacked onto the URL with the gif image. And then the javascript you use on the form to parse the URL variables (javascript that you probably got from here), well, it just won’t work, because the URL it’s trying to parse is not a normal URL.
<scripttype="text/javascript">// Parse the URLfunction getParameterByName(name){ name = name.replace(/[[]/,"[").replace(/[]]/,"]");var regex =newRegExp("[?&]"+ name +"=([^&#]*)"), results = regex.exec(location.search);return results ===null?"": decodeURIComponent(results[1].replace(/+/g," "));}// Give the URL parameters variable namesvar source = getParameterByName('utm_source');var medium = getParameterByName('utm_medium');var campaign = getParameterByName('utm_campaign');// Put the variable names into the hidden fields in the form. document.getElementsByName("utm_source").value = source; document.getElementsByName("utm_medium").value = medium; document.getElementsByName("utm_campaign").value = campaign;
This Pardot article written by:Â Bill Fetter
Unfettered Marketing
A collection of random thoughts on how people, places and things in our fascinating world connect to sales and marketing, and what we can learn from it.
Original Pardot Article: https://www.unfetteredmarketing.com/post/how-to-prevent-lazy-loading-from-messing-with-your-iframe-embedded-forms
Find more great Pardot articles at https://www.unfetteredmarketing.com/blog
Pardot Experts Blog
We have categorized all the different Pardot articles by topics.
Pardot Topic Categories
- Account Based Marketing (ABM) (7)
- Business Units (14)
- ChatGPT / AI (3)
- Completion Actions (5)
- Connectors (10)
- Custom Redirects (4)
- Data Cloud (2)
- Demand Generation (8)
- Dynamic Content (6)
- Einstein Features (12)
- Email Delivery (17)
- Email Open Rates (3)
- Pardot A/B Testing (2)
- Email Mailability (16)
- Do Not Email (1)
- Double Opt-in (2)
- Opt Out / Unsubscribe (14)
- Email Preferences Page (6)
- Engagement Studio (16)
- Industries (1)
- Non Profit (1)
- Landing Pages (9)
- Lead Generation (1)
- Lead Management (13)
- Lead Routing (3)
- Lead Scoring (16)
- Leads (3)
- Marketing Analytics – B2BMA (9)
- Marketing Automation (1)
- Marketing Cloud (3)
- Marketing Cloud Account Engagement (4)
- Marketing Cloud Growth (2)
- New Pardot Features (6)
- Opportunities (2)
- Optimization (2)
- Pardot Admin (64)
- Duplicates (1)
- Marketing Ops (1)
- Pardot Alerts (1)
- Pardot API (2)
- Pardot Automations (3)
- Pardot Careers (12)
- Pardot Certifications (4)
- Pardot Consulting (1)
- Pardot Cookies (3)
- Pardot Custom Objects (3)
- Pardot Email Builder (8)
- Pardot Email Templates (9)
- HML (6)
- Pardot Events (16)
- Pardot External Actions (1)
- Pardot External Activities (4)
- Pardot Forms (29)
- Form Handlers (8)
- Pardot Integrations (20)
- Data Cloud (1)
- Slack (1)
- Pardot Lead Grading (5)
- Pardot Lead Source (2)
- Pardot Lightning (1)
- Pardot Migration (1)
- Pardot Nurture / Drip Campaigns (1)
- Pardot Personalization (3)
- Pardot Profiles (1)
- Pardot Releases (18)
- Pardot Sandboxes (2)
- Pardot Segmentation (5)
- Pardot Strategy (7)
- Pardot Sync (2)
- Pardot Sync Errors (1)
- Pardot Tracker Domains (5)
- Pardot Training (3)
- Pardot Vs Other MAPs (4)
- Pardot Website Tracking (2)
- Reporting (22)
- Salesforce and Pardot (31)
- Marketing Data Sharing (2)
- Pardot Users (3)
- Salesforce Automation (5)
- Salesforce Flows (2)
- Salesforce Campaigns (20)
- Salesforce CRM (3)
- Record Types (1)
- Salesforce Engage (3)
- Salesforce Queues (2)
- Security and Privacy (1)
- Tags (3)
- The Authors (504)
- Cheshire Impact (9)
- Greenkey Digital (51)
- Invado Solutions (37)
- Jenna Molby (9)
- Marcloud Consulting (6)
- Nebula Consulting (60)
- Pardot Geeks (44)
- Salesforce Ben | The Drip (235)
- SalesLabX (3)
- Slalom (4)
- Unfettered Marketing (46)
- Uncategorized (1)
- Website Tracking (2)
- Website Search (1)
More Pardot Articles
See all posts
This Pardot article written by:Â Bill Fetter
Unfettered Marketing
A collection of random thoughts on how people, places and things in our fascinating world connect to sales and marketing, and what we can learn from it.
Original Pardot Article: https://www.unfetteredmarketing.com/post/how-to-prevent-lazy-loading-from-messing-with-your-iframe-embedded-forms
Find more great Pardot articles at https://www.unfetteredmarketing.com/blog