How to set up conversion tracking for your Bubble.io app

Dennis H. Lewis walks through setting up Google Ads conversion tracking on Bubble.io in seven steps: install Google Tag Manager, create conversion tags and triggers, define conversion actions in Google Ads, add element IDs to Bubble pages, and test with the Tagging Assistant. Accurate conversion data lets Google optimize for results instead of clicks, lowering your cost per acquisition.
Chapters
Are you burning through your Google Ads budget with zero conversions to show for it? Here's the brutal truth. Most bubble developers are flying blind because they never set up conversion tracking correctly. I'm Dennis Lewis from Ratio.dev and after 40 years in tech and building countless bubble applications, I've seen the same expensive mistake destroy marketing budgets over and over again. In the next few minutes, I'm going to walk you through the exact seven step system that we use to set up bulletproof conversion tracking for bubble applications. And this isn't some sort of theoretical walkthrough. This is the same system that helped our clients go from guessing about their ad performance to scaling profitable campaigns with complete confidence. And here's what most people get wrong. They think that bubble's built in, analytics is enough. And it's not. Without proper Google Ads conversion tracking, you're essentially throwing your money into a black hole. So let me paint you a picture. You launch your bubble app, you're excited, you set up Google Ads, money starts flowing out, visitors start coming in and crickets. Your Google Ads dashboard shows zero conversions, even though you know people are signing. The problem is that Google has no idea what constitutes a win in your bubble application. Is it a sign up? Is it a purchase? A contact form submission? Without conversion tracking, Google's AI is optimizing for clicks, not results. And that's exactly why your campaigns feel like you're taking dollars out of your pocket and setting them on fire. But here's the thing. Once you implement what I'm going to show you, everything changes. You know exactly which keywords, which ads, which audiences are actually driving results. Your cost per acquisition will drop, your return on ad spend will skyrocket, and you'll finally have the data you need to scale. So I'm going to break this down into seven simple steps. We're going to set up Google Tag Manager. I'm going to install it in your bubble application. We're going to create the conversion tracking tags, we're going to set up the Google Ads conversions, we're going to build the conversion triggers, configure your bubble elements correctly, and then we're going to test everything to make sure it's firing correctly. So let's jump in and get started. The first step is setting up your Google Tag Manager account. So first we're going to go into tagmanager.google.com if you've never used it, let's jump over here to the screen. You'll come in. When you get set up, you'll be in the workspace. You'll see that over here, our menu on the left up here at the top as well. Think about this as mission control for all of your tracking codes. And they could be for Adwords, they could be for Facebook, they could be for any other platform that you want to use. You can use Tag Manager to fire asynchronously all of these tags in the background, and that way you have one centralized place to manage them. That's another benefit to doing this. You're going to create an account and send it up as a web account and they'll give you a snippet that you'll need to install in Bubble, which we're going to see in just a minute. Once you've got it set up, you can go into admin and you can go to install Google Tag Manager. And here you'll see it gives you two snippets. The first one goes above the header. This is really the most important one. This one goes in the body tag as well, so you can click here to copy. And once you've copied this, you're going to go to Bubble and you're going to navigate your bubble builder to first to the gears for settings, and then you're going to go to SEO and Meta tags. And here in this section, you're going to paste in the Tag Manager snippet and you can see I've already got this put into mine here. And then you're going to go back to your Tag Manager and you're going to copy the second one as well. Once you've done that, you're going to copy that one and you're going to go back to Bubble. You're going to paste it into the body script here. And once you've done that, you need to deploy so that it actually goes live on your site. Remember, Otherwise it's just inversion 10. So don't forget that step as well. One important thing you can do is to always test Inversion test beforehand just to make sure it doesn't break anything on your site. Sometimes there can be some JavaScript conflicts, so it's always better to find them. But once you're confident that you haven't broken anything, hit deploy, send it to the live version. And now we have Google Tag Manager set up on your Bubble application, but that doesn't mean that it's actually doing anything. Now we're going to go back into the Tag Manager and we're going to look at some of the tags that we need to create. I'm going to go to the workspace up here at the top. And then I'm going to go to Tags and there's several of these that we need to set up. Let's go first to Triggers. And the one here that I want you to do is to set up one for page view. Okay? So you're going to go to new trigger here and in this case I'm just going to show you mine. But you will see here that it is of type page view. So that means and you leave it for all page views. So this is going to happen on every page load on your site. This is important because need that when we create our tags. So now you're going to go to Tags and the second thing you're going to want to set up is a tag for the conversion linker. Okay, I'm going to click on this here and you can find it here. When you do a new one, you're going to just look for conversion linker from Google. Just click here and you can just come over here and go to Google Ads. Then you can say conversion linker. Okay? That's where you'll find it. Once you've chosen the conversion linker, you have to associate it to a trigger. And it's important that this one uses the trigger that we've created, which is all pages. So this is going to fire on all of your web pages. It's not going to slow things down. No big deal. After we've done that, we're ready to start getting our goals set up in your ad account so that we can actually track the conversions. So I'm going to jump into an ad account that we here and once you're logged into your Google Ads account, you're going to go to goals. And here I'm just going to go to summary. So you can see that we have some goals here created. And I'm going to create a new conversion action. Okay, Just so you can see, this is going to come up and you're going to want to make it a website conversion. And you're going to put in your domain, you're going to scan it and you're going to continue.
Once you've done this, you've given it a name, then tag, you're going to go to the tag setup and you're going to want to choose the option of Google Tag Manager. And when you do that, this is telling you to do the ad conversions linking that we've already done. And it's going to ask you for some information that we're going to get from Google Tag Manager. So we're going to go back to Google Tag Manager. I know this is. There's a lot of moving pieces here, but just follow along with me. And we're going to look at this one which is called Lead Resource Center. Okay. And what I've done here is it's a tag of type Google Ads conversion tracking. And let's just see what we've got here. And it has a label, it has an ID and a label and these we're going to get now in our ad account and they're over here. And so now we have a conversion ID here and a label. So you're going to need to use these, copy them from when you've created your conversion here with this specific goal. In this one I've created one of type. It is a sign up and I've given it a value of $5. You can set that whatever you want. It's from the website and you know, there, there's some more details here. I'm not going to dive in deep to how you know all of the details on this, but you're going to want to give it a window usually default settings are usually good enough. But you're going to copy this ID and you're going to copy this conversion label and then you're going to go back and put them into Google Tag Manager so that in these fields and, and then for the trigger this is really important. You're going to need to create a new trigger for this lead. And this is really specific what you're going to have to use for bubble. And it's really important, it's going to be of type id. You're going to create an element ID and we're going to use this in bubble. So here I've created lead dash RC dash. Okay. You can put whatever text you want in there. I put it as a minimum of 500 milliseconds. It's associated associate this with your tab. This is what's going to actually fire this tag from Google Tag Manager. So it's really important that you create the correct one here. And I'm just going to edit this just so you can see that is selection method of type id, not CSS selector. Okay. And it is an element visibility. So this is going to fire when a specific element is visible on the page. Okay, this is important. This is the id. We're going to see where we're going to use that and we're going to let it fire every time this element appears on the screen. Okay. Once you've done this, you're going to follow that same procedure for each conversion that you want to track in AdWords. So you're going to create it in AdWords, you're going to create it in Google Tag Manager, you're going to create the trigger for it. And then once you got them all created in here, you do need to be careful to submit so that it will publish and go live on your site. Otherwise the changes, they'll just be sitting here in the dashboard, but they won't be live on your site. So you're going to want to submit those out. And now the final step. So we have created our conversion tags, we've set up our goals in the ad conversions, we've created the triggers and now we need to go into bubble and we need to go to wherever it is. In this case we're doing a lead for a sign up. So I'm going to go here, I have a, on the thank you page. In this case it's in a reusable element. But wherever it is on your bubble application, wherever you're saying thank you for that sign up, I have here an HTML event. You can put this on any element in bubble that you want. I happen to use this because we use other conversion trackings for other uses, not just Google AdWords. But the important thing is you have to put here in the ID attribute, you have to put that same text that you put into your trigger so that it can marry those together and that they don't get confused. If you don't see this ID attribute, you'll need to go to your settings and this is in general actually you need to come down here and click this. Expose the option to add an ID attribute to HTML elements so you make sure that it has that's clicked on, otherwise you won't see it. You won't be able to put that ID text in your bubble application. Once you've done that, you need to deploy again your bubble application. And now you've got all the pieces set up together to be able to track your conversions. But you still need to do one more step that's really important and that is testing everything. And so there you're going to go to your ad account and if you go to your here to your goals, you'll find the one that you're here, this is the one you will go to troubleshoot and here you can test with the tagging assistant. And when you do that it is going to open this up in a debugger for Google Tell it what page to open up. So give it a page. It's going to open up that page, it's going to connect, and then you're going to go through the process of signing up on your website. And when you get to the end, you'll be able to see tags buyer, you'll be able to see it on screen and you'll be able to go through the process. And when you get to the end, it will fire that conversion track and it will tell you, okay, everything's working correctly. And that's the last step. The seventh step is testing everything. So you want to make sure that the whole process actually works. So once you've implemented this system, everything will change. Okay? You'll see real conversion data showing up in your Google Ads. Probably takes 24, 48 hours before that happens. You know, we've used this over and over again for multiple applications. Always works. And here's the best part. This isn't just about Google Ads. This same foundation works with Facebook ads, LinkedIn ads, any other platform. You could just create new tags inside of your tag manager for each platform and use that same trigger and it will work the same way. So that's really important. Now let me warn you about three mistakes that will sabotage the entire setup. First, don't skip on the testing. Make sure you actually see that it works and that you see that conversions are actually showing up in your ad account staff port. If you don't see them showing up and they're actually people signing up, you missed something along the way, go back to the video. Or if you're really stuck, feel free to reach out to us here@ratio.dev and we'll lend you a hand. We'll be happy to help you. Second, be precise with your trigger timing. Okay? Fire that conversion. If you fire it too early or too late, your data won't actually be true. So make sure it's on the thank you page. Make sure that whatever element you're associating actually shows up only when they've completed the process. Don't put it in a pop up for example, that loads on pageload because then may fire beforehand and they may not actually finish. Be careful about that. And third, remember that the privacy rules in bubble can interfere with your tracking. So make sure your conversion pages are accessible to the tracking scripts. Make sure that you don't do anything in bubble that makes things not work. Look, setting up this one piece of building a successful bubble application. If you want all the other pieces, I really recommend that you go to ratio.dev and you sign up for our no Code Resource Center. That's where we put how to videos, we put vetted plugins, we put guides, great books to read. Our podcast episodes go in there. So it's updated weekly. It's totally free. So I definitely recommend that you do that. And once again, if you get stuck, feel free to reach out to us. That we'll be glad to lend you a hand and get your get all this set up for you. Thanks again. I hope you've enjoyed this video and I'll see you on the next one.
More from Dennis

Is Google Killing Websites? The Future of Search, SEO & Web Design After Google I/O

Something we're still looking forward to in Bubble: richer design experiences! #bubble #nocode #ai

Big mistake companies are making right now: firing employees instead of empowering them. #ai







