Listings iFrame Snippets

before you start your boom contact will provide you the appropriate link to replace the your link here placeholders if the default embedding dimensions provided do not work as expected on your web page, please reach out to your boom contact for assistance boom recommends testing your changes on desktop and mobile devices before you publish your changes list of ready to use snippets general styled snippet (scrollable within size constraints) this snippet embeds boom iframe with size of 90% screen height general mobile agnostic snippet this snippet embeds boom iframe with size of 90% screen height and fixes mobile/tablet size to 768px you can use this snippet as base for experimentation if you want to tweak desktop size > find and replace update height 90vh to desired desktop height if you want to tweak mobile size > find and replace update height 768px to desired mobile height hubspot integration hubspot requires a css selector to attach the embed to the right element on your page replace \<use your css parent selector> with an actual selector that exists on the page var wrapper = document queryselector('\<use your css parent selector>'); ad campaign & conversion tracking everything in this section is optional the listings pages work without it set it up when your marketing team wants to measure what the embedded pages produce which ad campaigns drive leads and showings, how visitors move through the funnel, or when they want to fire their own tags (meta pixel, ga4, anything routed through google tag manager) on a successful submission because boom's pages run inside an iframe on your site, tracking needs a small amount of glue in two directions into the frame when a visitor lands on your page from an ad, the click id ( gclid ) and campaign tags ( utm ) are on your page's url the iframe cannot read them on its own; a one time snippet forwards them in out of the frame when a visitor submits a form inside the iframe, tools on your page (gtm, meta pixel) cannot see it happen a one line script bridges the signal out you want what to set up see funnel activity in your google analytics (ga4) ga4 integration in the boom portal no snippet changes ( §2 /#2 google analytics ga4 ) google ads conversions attributed to your campaigns google ads integration in the portal + the forwarding snippet ( §1 /#1 forward ad click parameters into the iframe + §3 /#3 google ads conversion tracking ) fire your own tags via gtm (meta pixel, etc ) on submission the bridge script + one gtm trigger ( §4 /#4 google tag manager meta pixel host page events ) 1\ forward ad click parameters into the iframe browsers do not let an embedded iframe read the address bar of the page that embeds it so when a visitor arrives from an ad e g yoursite com/rentals?gclid=cj0k \&utm campaign=spring boom never sees those parameters unless your page passes them along add the data boom embed attribute to every boom iframe on the page, then paste this script once, anywhere after the iframe(s) what it does copies gclid , utm source , utm medium , utm campaign , utm term and utm content from your page's url onto the iframe's url only when they are present boom then stores them on the resulting lead and showing records and uses the gclid to report google ads conversions ( §3 /#3 google ads conversion tracking ) without this snippet, google ads conversion reporting falls back to google's own cookie matching (which only works some of the time), and campaign tags won't be attached to your leads in boom if you run any paid campaigns to pages with a boom embed, add it 2\ google analytics (ga4) if you use ga4, boom can report the visitor funnel inside the embedded pages straight into your ga4 property no snippet changes are needed setup boom portal → settings → integration → google analytics → paste your ga4 measurement id ( g xxxxxxxx ) once saved, these events appear in your ga4 property event in ga4 fired when listing contact us attempted a visitor opens the contact us form on a listing listing request showing attempted a visitor starts the request a showing flow listing apply attempted a visitor clicks apply on a listing listing custom button attempted a visitor clicks a custom button configured on your listings contact us submitted a visitor submits the contact / "about you" form on a listing request showing slot selected a visitor picks a showing time slot request showing completed a showing is booked prescreening submitted a visitor submits the pre screening questionnaire contact form submitted an embedded contact form is submitted 3\ google ads conversion tracking if you run google ads campaigns, boom can report a real google ads conversion (not just an analytics event) when a visitor converts inside the embed so your google ads dashboard shows "campaign x drove n leads / m showings" setup in google ads, find your conversion action's id and label goals → conversions → your conversion action → tag setup → "use google tag" you'll see a conversion id ( aw 123456789 ) and a conversion label create up to two conversion actions one for contact form submitted , one for showing booked in the boom portal → settings → integration → google ads → paste the conversion id and the label(s) add the forwarding snippet from §1 /#1 forward ad click parameters into the iframe to your page strongly recommended, so the click id reaches the iframe and conversions attribute reliably conversions are then reported at exactly two moments contact form submitted label a visitor submits a contact form (on a listing or embedded) showing booked label a visitor books a showing 4\ google tag manager / meta pixel (host page events) if you prefer to fire your own tags a meta pixel lead event, a ga4 tag in your own container, anything else in gtm boom can notify your page whenever a visitor completes a submission inside the iframe step 1 add the bridge script next to your iframe (once per page, covers every boom embed on it) \<your boom host> must be the same host as your iframe's src (for example, iframe src="https //yourcompany boom rent/listings" → script src="https //yourcompany boom rent/boom embed js" ) the script only trusts messages from its own origin loading it from a different host than the iframe means events will be ignored step 2 create one gtm trigger on each successful submission the script pushes a custom event onto your data layer { event "boom form submitted", boom source "request showing completed", // which flow completed boom partner slug "your company", boom property slug "maple court", // present when a property is known boom unit slug "unit 3b", // present when a unit is known boom lead id "idle x1y2z3" // present when a lead was created } in gtm triggers → new → custom event → event name boom form submitted , then attach your existing meta pixel / ga4 / other tag to that trigger data layer field meaning boom source which flow completed contact form submitted , contact us submitted , request showing completed , or request showing submitted (showing requested, pending time confirmation) boom partner slug your company identifier always present boom property slug the property, when known boom unit slug the unit, when known boom lead id the created lead's id works well as meta's eventid for deduplication optionally create data layer variables for the boom fields to segment or deduplicate no personal data ever crosses the frame boundary ids and slugs only, never a name, email, or phone number meta ads nothing needs to be forwarded into the iframe for meta your pixel and its fbp / fbc cookies live on your page, and this event lets gtm fire the pixel right there attribution happens on meta's side the script is safe to include on pages without gtm, and safe to paste more than once it deduplicates itself verifying your setup the easiest tool for this is google tag assistant https //tagassistant google com/ it shows every google tag and data layer event firing on a page in real time open your page with test parameters appended, e g yoursite com/rentals?gclid=test123\&utm source=google\&utm campaign=test submit a contact form or book a showing through the embed your own tags (gtm) connect tag assistant https //tagassistant google com/ to your page gtm preview mode does this automatically the boom form submitted event appears in the data layer with the identifiers attached, and you can watch your meta / ga4 / other tags fire on it boom's ga4 & google ads tags they fire inside the iframe, so tag assistant on your page won't see them instead, connect tag assistant to the boom page itself open your boom listings link directly in a new tab with the same test parameters alternatively, in devtools → network a request to googleadservices com with send to=aw /\<label> confirms the ads conversion; it appears in google ads within a few hours ga4 the events appear in reports → realtime your boom contact can confirm the campaign tags ( gclid=test123 ) were stored on the resulting lead