Replies posted by leah.ann

53 Replies

E
edg93
posted in Ask a Question

Fade In / Fade Out Hover Effect for Buttons

Hey @samfoote 🙂 Certainly! You just need to modify your CSS selector to one that is applied to all of the buttons on your page. Thankfully, Unbounce already has a class that they add to all of their buttons, so you can just use that. This CSS should work for you: <style> .lp-pom-button { transition: all 0.3s ease; } </style> The lp-pom-button class is applied to all button elements, so this should select all of them and give them that transition effect.

3
leah.ann
6 years ago
mattyglover
mattyglover
posted in Ask a Question

Using jQuery to prevent lead form being submitted

To supplement everything that @Hristian has said, here’s a quick script to achieve steps 2-4: <script> lp.jQuery().ready(function() { // Grabs form submit button var id=window.module.lp.form.data.formButtonId; // Unbinds submit button on-click event lp.jQuery("#"+id).unbind("click tap touchstart"); // Re-binds on-click event to add your own function lp.jQuery("#"+id).bind("click tap touchstart",function(e) { // Prevent submit e.preventDefault(); e.stopPropagation(); /* Your custom validation stuff Your custom validation stuff Your custom validation stuff Your custom validation stuff */ // Submit form lp.jQuery("form").submit(); }); }); </script> This doesn’t account for keypress like Hristian mentioned above, just actual clicks (or mobile taps) on the submit button, but hopefully it gives you something to start working with!

8
L
4 years ago
mattyglover
mattyglover
posted in Ask a Question

Using jQuery to prevent lead form being submitted

Hey @mattyglover! Have you tried adding e.stopPropagation(); after e.preventDefault();? preventDefault() only removes the default functionality that was added to the on-click event, it doesn’t stop the JS from continuing to run (in this case, running the form’s POST action). Alternatively, there’s actually a community script for adding custom validation to your forms. 👉 Check it out!

8
L
4 years ago
S
sgro28
posted in Uncategorized

Javascript tag error?

Hey @sgro28 That usually indicates a syntax error, but we’d have to see the script itself to know what precisely is causing it. Were the comments the only thing that you added before seeing the error? Comment tags wouldn’t normally matter, but if they were formatted improperly, that very well might be what’s causing the issue. You might also be able to check your live page’s error console (Ctrl + Shift + I), to see if it gives you any better indication of where the issue is. Usually, you can click on the error in the console and it’ll bring you to the exact line of code that’s throwing the error. Hope that helps!

1
leah.ann
6 years ago
Jess
Unbouncer
JessFormer Community Manager @ Unbounce
posted in News and Announcements

Community Spotlight 👉 Leah Thompson!

Holy dang, I can’t believe it’s already been a year! I’m beyond happy to be a part of this wonderful community and I’m honored to be given this spotlight. Also, belated hello to everyone I haven’t had a chance to talk to yet! 👋 Zoe_Tattersall: Thanks so much for the kind words, Zoe! 🤗

2
leah.ann
6 years ago
Alexandre_Nowaczyk
Alexandre_Nowaczyk
posted in Ask a Question

Overlay that triggers javascript on parent frame

Hey @Alexandre_Nowaczyk iframes can definitely be a tricky beast when you’re dealing with cross-domain functionality, but there is a method that you can use to achieve what you’re looking to do. Javascript’s postMessage() method allows you to communicate between frames from two different domains as long as you can control the code on both domains (which it sounds like you should be able to do). I won’t be able to give you the exact code that you’ll need, but I can point you in the right direction! (Disclaimer: While I’m using something pretty similar to this with our own popup and landing pages, I haven’t actually tested this functionality specifically. I’m happy to troubleshoot with you if you run into issues along the way though!) Something like this should be added to the child frame’s Javascript (the Unbounce popup in this case): <script> document.getElementById('YOUR_CTA_ID').onclick = function() { parent.postMessage('Hello', 'YOUR_WEBSITE_URL'); }; </script>

4
johnresaas
5 months ago
E
edg93
posted in Ask a Question

Fade In / Fade Out Hover Effect for Buttons

Hey @edg93 👋 That’s certainly possible! The first thing that you’ll want to do, if you haven’t already, is to is to create your hover style within the button properties in the builder. Click on the button that you want to create the effect for, go to the “Appearance” section, and click on the “Hover” tab: You can either let Unbounce decide what your hover color will be, or you can set it yourself. Then, to get the nice fade animation between the two states, open up your stylesheets (located at the bottom bar of the builder): And add the following CSS: <style> #your-button-id { transition: all 0.3s ease; } </style> You can find your button ID by clicking on your button and scrolling to the bottom of the “Properties” panel. It’s located in the “Element Metadeta” section. You can adjust the speed of the transition by changing 0.3s to something else. For example, 1s would be a slower fade, whereas 0.1s would be a very fast fade.

3
leah.ann
6 years ago
Luis_Francisco
Unbouncer
Luis_FranciscoSenior Growth Development Manager @ Unbounce
posted in Tips & Scripts

[Create] Reading Progress Bar on Scroll

Wow, super easy to implement, too! This is awesome, thanks!

15
Jess
Unbouncer
3 years ago
R
Rodney
posted in Ask a Question

Re: Google Phone Website Call Conversions PROBLEM

Wonderful, glad to hear it!

12
leah.ann
6 years ago
R
Rodney
posted in Ask a Question

Re: Google Phone Website Call Conversions PROBLEM

Rodney: You wont see the google tracking number unless you do a search and click on a adwords ad that I have running only then will google change the number. My bad, you’re totally right! Sorry about that. I’m definitely seeing what you’re describing now. Try adding the following CSS to the same stylesheet that you added the other CSS above: #lp-pom-button-226 .label, #lp-pom-button-79 .label { top: 35%; }

12
leah.ann
6 years ago
R
Rodney
posted in Ask a Question

Re: Google Phone Website Call Conversions PROBLEM

Cool, thanks for sharing that with me. Does this page have the Google tracking script on it? I’m seeing “Call Us Now” twice and your phone number doesn’t look to have changed to the tracking number, so it looks like this: When I used the browser DevTools to see what it would look like without the second “Call Us Now”, everything looked to be aligned correctly: Are you experiencing something different on your end?

12
leah.ann
6 years ago
R
Rodney
posted in Ask a Question

Re: Google Phone Website Call Conversions PROBLEM

Hey @Rodney Glad to hear you figured out the line break issue! Would you mind sharing a link to the landing page that you’re working on? Vertical alignment tends to be a bit finicky and there are a few different ways to approach it depending on how the button is already styled.

12
leah.ann
6 years ago
R
Rodney
posted in Ask a Question

Re: Google Phone Website Call Conversions PROBLEM

Sorry @Rodney, I should have been more clear with my instructions! You’ll want to add the CSS to the stylesheet area at the bottom of your page builder. Be sure to wrap it in <style> tags, so the full text that you’ll paste into the stylesheet will be: <style> #your-button-id .label:before { content: 'Call Us Now'; } </style> Rodney: do I delete the Call Us Now text from button text field You certainly can, and might want to for the sake of keeping things clean, but you don’t have to. What’s essentially happening is that the Google phone call conversion code is replacing all of the button text with the new tracking number, not just the phone number itself. By adding the text using the :before pseudo-class, it is not affected by the script. Rodney: Also this doesnt address the issue of the number is there a way of hiding the google number and display my number instead? Apologies, I misunderstood what you were wanting here. I thought you just wanted the

12
leah.ann
6 years ago
R
Rodney
posted in Ask a Question

Re: Google Phone Website Call Conversions PROBLEM

Hey @Rodney The easiest way to re-insert the text before the phone number would probably be to add it via CSS pseudo-class: #your-button-id .label:before { content: 'Call Us Now'; } As for the formatting of the number itself, I believe Google will match the same formatting of the number that you pass through the following function in the script (at the bottom): <script> $(function(){ _googWcmGet(ubCallback, '1-800-123-4567') }); </script> In this part of your script, does your number have the format (00) 0000 0000?

12
leah.ann
6 years ago
A
Andy2
posted in Ask a Question

Send user back to previous page with text link

No problem! And yes to both questions. 🙂 So if I was going to use the selector from the screenshot, the final code would be this: <script> jQuery(function() { jQuery("#lp-pom-text-49").click(function() { history.go(-1); return false; }); }); </script>

4
A
6 years ago
A
Andy2
posted in Ask a Question

Send user back to previous page with text link

Hey @Andy2 The solution given in that thread should still work for your needs! The only thing that you’ll need to change is the selector: <script> jQuery(function() { jQuery("YOUR_TEXT_LINK_ID_HERE").click(function() { history.go(-1); return false; }); }); </script> You can find the selector at the bottom of the Properties panel for the text block that you want to have linked (click the image below to see what I’m talking about): Let me know if that works out for you. 🙂

4
A
6 years ago
L
Lizzmoffat
posted in Ask a Question

Favicon not working

Ah, took a quick peek at your page’s source code. It looks like the <link> tag is still surrounded by <script> tags. Try removing those <script> tags to see if that does the trick!

38
B
7 months ago
S
sgringer
asked in Ask a Question

Popup referrer targeting based on incoming utm codes

Sure can! When you’re setting up the URL targeting rules for your popup, set a URL path rule to Show on URLs that contain [utm_param]=[your-referrer] Here’s a quick example I set up: In this case, my popup would not show up on pages that had “ref=test” somewhere in the URL (of course, make sure to add your domain, which I hadn’t done for this screenshot). Hope that helps!

2
S
6 years ago
L
Lizzmoffat
posted in Ask a Question

Favicon not working

Hey @Lizzmoffat! Looks like you’re just missing a closing quotation at the end of your href URL. <link rel="icon" type="image/x-icon" href="https://www.canuckplace.org/drive/uploads/2017/09/favicon.ico" /> Should do it for you!

38
B
7 months ago
Zoe_Tattersall
Zoe_Tattersall
posted in Landing Page Review

A/B test gone wrong!? #HALP

Zoe_Tattersall: 95% of the traffic is from Adwords and is routing thru call extensions (even before it hits the website). Totally missed the second half of this sentence when I read it originally! Do you mean that 95% of your traffic never even hits the landing page and converts via call extenions? If so, did you make any changes to your ad copy/targeting at all? Comparing the two landing pages, and barring any potential technical issues, it definitely doesn’t seem like the page design would be the issue. I completely agree that the re-design is more cohesive and conveys more trust than the original, and the verbiage is nearly the same between the two pages. However, if the vast majority of your leads are from call extensions, the landing page itself would have little bearing on that (aside from maybe affecting quality score, which I would think would go up if anything). Are you looking at an overall view of your conversions, or segmented by variant? Can you segment by conversio

4
Zoe_Tattersall
6 years ago
Zoe_Tattersall
Zoe_Tattersall
posted in Landing Page Review

A/B test gone wrong!? #HALP

90% from mobile! Do you have a screenshot of the mobile design? I think that’s probably going to be the most relevant piece to look at, considering it accounts for the vast majority of the traffic. Do you have a breakdown of the devices (traffic from iPhone vs Android, iPad vs iPhone 6, etc.)? Have you thoroughly tested the form from all of the most popular devices? I recommend a tool like BrowserStack for this if you don’t have physical devices at your disposal, as it connects to and emulates real devices. In my experience, when common sense fails, there’s usually a technical problem. 🙂 Given the fact that you’ve had to use a third party form, there’s all the more possibility for something to not play nicely.

4
Zoe_Tattersall
6 years ago
K
kokko
posted in Ask a Question

Tracking source page of convertable conversion

Hey @kokko If you use Google Analytics, this is actually pretty easy! First, make sure that you’ve followed the steps outlined here. I created a very basic GA custom report for you, which you can apply directly to your GA account: https://analytics.google.com/analytics/web/template?uid=IyoWyYjKTxiytKJ3WOMeDw This report only shows Unbounce Convertable event data. When you open the report, you should see two options in the “Event Action” column - view and conversion (the two events that the Convertable sends to GA). Clicking on either of them will drill down into all of the landing pages that your Convertable has either appeared on or converted on, respectively. You might want to modify the columns to meet your needs, but this will give you a breakdown of sessions, conversions, and conversion rate by landing page for your Convertable. Hope this works for you!

2
K
6 years ago
K
kcgibbers
posted in Ask a Question

Google Analytics - Variants

Hi @kcgibbers There shouldn’t be any need to add your tracking script to each variant. If you add your Analytics tracking script via Script Manager, all of that should be taken care of for you. Assuming that everything is configured correctly, you should see the variant at the end of the URL in your Analytics landing page data. You can confirm this by navigating to Behavior > Site Content > Landing Pages in Analytics after some time has passed to allow for data to start allocating.

2
K
6 years ago
33social
33social
posted in Landing Page Review

Increase Google Adwords quality scores

Hey, just wanted to mention that anybody using AdBlock will not be able to see the images on your page because of the “ads” subdomain. That’s probably also the reason why Jess couldn’t access the link you posted (AdBlock prevents that as well). It’s possible that visitors using AdBlock might not be able to submit a form, either. I didn’t want to risk sending you a garbage lead, so I haven’t tested this, but you might want to do so on your end with AdBlock enabled. Considering that upwards of 30% of Internet users are using ad blocking tools, I would seriously consider changing your subdomain to something other than “ads”. This could very likely be affecting your quality score as well, especially the “landing page experience” portion.

6
W
6 years ago
S
Selina
posted in Ask a Question

Tracking form submissions in Google Analytics

Hey Charles! My solution above actually relies on the Google Analytics script provided in the Unbounce Script Manager, not the GTM script. While I don’t use GTM with Unbounce, I believe you’re right in that adding the GTM script via the Script Manager will not automatically create events that push to GA. It simply adds the GTM container to your pages, after which you need to create the event tags within GTM. However, if you add the Google Analytics script via Script Manager, all action items (button clicks, etc.) should be automatically sent as events to your GA account. At that point, you can determine which event matches the ID of your form submit button and set up a goal for it.

6
C
6 years ago

Badge winners

Show all badges
Terms & ConditionsCookie settings