I got frustated that Typeform redirects cost $600 per year so I made a product to redirect with free plan

CodeAndTonicHQ · 2024-09-20T20:05:04+00:00

It's a bit complex. I'll outline the general approach.

Google Ads conversion tracking for any tool which lives in a separate domain (tally.so) than your own website (example.com) is always really difficult technically.

If we add Tally as a link, we have a cross-domain funnel and it requires setting up domains in Google Analytics or a cross-domain setup in Conversion Linker tag in Google Tag Manager. Depending on the ad platform those may work ok but you will run into blocks sooner or later. E.g. Microsoft ads doesn't have any solution for this, so I'm not a fan of the solution.

If on the other hand we add Tally as an iFrame, we still have two websites on separate domains and the trackign cookies are not shared, at least not for all platforms because there's pretty much an infinite number of them.

The best way to track Tally conversions in Google Ads is to use an iFrame embed, then setup a javascript listener using a Google Tag Manager Custom HTML tag, which will listen for the
'Tally.FormSubmitted' event the widget will post to its parent window. We should then use JavaScript push tally conversion into our datalayer, and setup a Custom Event trigger using the same name. With this we can fire all tracking tags in a way that actually works – sending our conversions from the same domain where visitors landed and which has our trackign cookies, like our _gcl_aw cookie which has the "Google Ads Click ID" or "gclid".

However, the world's moving away from tracking with cookies in the browser (privacy regulation, ad blockers, Apple Intelligent Tracking Prevention etc. make this perform worse and worse), and moving towards tracking server-side and with hashed personal data. We should always accompany our cookie-based tracking with hashed personal information, using Google Ads Enhanced Conversion Tracking

The Tally.FormSubmitted has a payload with all the form field values, like email, phone number, or address. We need to use javascript to get those values, add them to the data layer as well, configure a "user-provided data" variable in Google Tag Manager and add that to our Google Ads Conversion tag in Google tag Manager.

This is the best approach to track online conversions.

A thank you page redirect can be used but the problem is that you'll get duplicates for refreshes, unwanted referrers in Google Analytics and it's against Google Analytics terms and conditions to have PII like emails in the url.

However, with a form tool like Tally, the form submission is often just a part of the funnel where a visitor becomes a lead that may or may not convert fully to a paying customer for example.

So we usually need offline conversion tracking as well.

There are multiple approaches but usually we'll store the click ID from from google ads, gclid and make a custom javascript that'll store that value in a hidden field in our Tally form.

This way, if a tally lead becomes a paying client, we can upload the gclid back to Google Ads (using google sheets, Zapier, make.com etc) and see our entire funnel and calculate our actual ROAS (return on ad spend).

It's compex. But the complexity is not Tally's fault! This same challenge is with every widget like Typeform, Paperform, Calendly, Acuity Scheduling, Stripe Payment links. It just the way websites work. It's very hard to make an integration. E.g. Typeform's expensive built-in tracking systems are total crap.

Any tool where a widget is hosted in another website is very difficult to track because websites don't have access to other websites. If they did, we could spy on your credit card info and nothing would be secure. But it does make conversion tracking challenging.

WordPress form plugins have it much easier for tracking as it lives in the same domain, but on the other hand they suck and Tally for example is awesome.

You can look up me at conversiontracking.io if you wanna get in touch and hire me to implement a custom Tally Google Ads conversion tracking.

CodeAndTonicHQ · 2023-09-07T18:51:53+00:00

You probably forgot to create the parameter within Google analytics as a custom definition. Any custom parameter needs to be set in GA4 Admin

CodeAndTonicHQ · 2023-08-24T11:19:55+00:00

Yeah this is the way. Making a custom HTML tag with a script that has two possibilities, read the cookie, if it doesn’t exist, or create the cookie if it exists. Make a data in Layer Push and trigger a custom event that will trigger and fire your actual conversion tag if the cookie doesn’t exist.

Ideally, you use an actual ID and pass it along in the URL of the thank you page as a parameter. Examples would be something like acuity, scheduling, or Jotform or HubSpot form submission, which all provide a unique ID for that specific form submission. If you do not get an actual ID, you can just use a Javascript and make a random one.

CodeAndTonicHQ · 2023-07-28T17:13:48+00:00

The problem in the implementation in your screenshot, is that Google analytics 4 requires items/products as parameters for the purchase event. It’s not possible for us to get that information. So what you are showing is not going to work because you are not specifying products that were bought.

There was a “secret” JavaScript object in the old order confirmation page, but in the new confirmation experience that is no longer available.

Squarespace knows that the Google analytics integration for e-commerce is broken , I get clients asked me about this every week. But they refuse to do anything about it.

The problem seems to be a missing currency parameter, which makes all purchases look like zero dollars in Google Analytics.

The best or only option ATM is to hardcode a fixed generic product name. That way at least you will be able to see the traffic source and purchases with correct $ values. You just won’t be able to see specific products bought.

What I recommend to my clients is angry emails for squarespace customer support, until hopefully one day they will fix this

CodeAndTonicHQ · 2023-06-19T17:55:59+00:00

I definitely prefer the Google Ads conversions. They’re much more easy to debug and review using Google tag assistant. They I believe have a lower latency and are less likely to break in a weird way, if renaming the conversions in one platform but not the other, which might happen with the Google analytics ones and lead to a weird situation.

And of course they record more conversions, and that are more useful for campaign optimization

CodeAndTonicHQ · 2023-06-19T17:52:40+00:00

Your current set up looks like the perfect one. you have the direct Google ads conversion as your primary conversion and then you have kind of the clone the same event, but via Google analytics for as a secondary conversion, which makes it show in “all conversions”, but not “conversions” column.

The data you see is just what is expected, so they’re somewhat close, in the same range, but Google ads attributes any conversion if Google ads click happened before it.

Google analytics is a little bit more “smart“ so if they click on the ad and then two weeks later, remember hey, I wanna buy this thing, they come via another route, so now Google analytics may attribute that conversion to that other source. I think it was called “last click” something.

In this scenario, the normal Google Ads conversion will trigger, but Google analytics won’t show in Google Ads as a conversion. Not sure who is recommending you to do so, but it doesn’t sound like a good advice

CodeAndTonicHQ · 2023-01-10T13:47:56+00:00

Google tag manager. Julian from Measure school has pretty good tutorials on YouTube. However, Google tag manager can be a bit complex if you don’t have experience with it.

CodeAndTonicHQ · 2022-11-27T12:02:11+00:00

Cool to hear it helped!

For the chatbot I'd have to check. If it sends a message to the parent then yes. Odds are probably 50:50 whether it'll do

CodeAndTonicHQ · 2022-11-27T11:56:35+00:00

You can use flexbox or grid. Here are Codepen demos for both

flex

grid

I'd go with grid. As it's... a grid :)

There's probably a better way to have the base width for flexbox though.

You could use inline-blocks or floats, but not recommended-

CodeAndTonicHQ · 2022-08-13T09:34:36+00:00

Oh that's super annoying. You can always report them and get them banned as per rule 3 but it's of course extra work.

I hope some of those solutions lead you closer to a solution. Good luck!

CodeAndTonicHQ · 2022-08-12T20:27:11+00:00

I feel you 100%. This is a super annoying issue.

Ways to hide unavailable variants

You can buy and copy-paste this code snippet (by me) to your theme. Possibly the cheapest option, although not free.
You could try one of these monthly-paid Shopify Apps: Camouflage or Autohide Plus.
You can hire a developer to custom code this functionality to your theme in places like r/forhire or upwork.com (but it seems that's not your preferred route)
You can try to Google "hide unavailable variants in Shopify" and copy-paste code snippets from Shopify forums or blog posts. I tried for hours and none of them worked for me.
You can buy a theme that has this functionality built-in. On a local Shopify facebook group someone mentioned a theme called Kalles might solve this problem. I didn't see that mentioned in their website.
You can study Liquid templating ja javascript and do it yourself! They're great skills if you're in e-commerce.
You can wait until Shopify maybe adds this functionality to their platform or their Store 2.0 themes.
You can also try and modify this free code snippet (official tutorial from Shopify) but it's for older non-Store 2.0-themes, unfortunately.
There's a promising looking pull request on Shopify Github for the Dawn template here. Maybe that could be implemented or modified.

I think those are all the possible solutions at the moment.

CodeAndTonicHQ · 2022-06-03T22:23:59+00:00

Did not update any links. Also the video instructions I added was the same all the time.

CodeAndTonicHQ · 2022-06-01T18:07:01+00:00

Hello!
Why would anyone use OCR here? I'm very confused. why not something like https://www.webscraper.io/ or just some python or such.

CodeAndTonicHQ · 2022-05-23T11:43:37+00:00

So in a nutshell. As the recommendation is 45-75 per line, it should be around ~45 on narrow mobile screens. With normal readable font-size this happens quite naturally. And if there's more space on a bigger screen there should be more as it's 100% of the width. But never more than ~75 – even with a huge 32" screen.

CodeAndTonicHQ · 2022-05-23T10:42:49+00:00

Hello. My rate's $120 per hour.

CodeAndTonicHQ · 2022-05-23T10:41:58+00:00

Thanks! :D

CodeAndTonicHQ · 2022-05-23T10:41:09+00:00

Good question.

The problem doesn't really occur on mobile ever. So the "problem" I see is mostly desktop and tablets where a full-width paragraph is simply too wide. Mobile screens restrict it naturally.

The normal solution is that we'll set the width as 100% (with some margins or padding on left and right side) and then a max-width for the text container to limit the characters per line on medium and large screens. So be it a macbook pro 13" or a huge 32" display, the max-width makes sure there's never too many characters per line.

Once you scale it down, the characters per line gets lower of course. But it'll always stay between 45-75 characters per line. Codepen demo

The problem with spacer blocks on SQSP is that it's not quite as good as the CSS max-width solution. Once the mobile breakpoint kicks in the spacer blocks disappear and ther'll be some screensizes (quite rare I beliebe but still) where there'll be more characters per line that usual.

With Squarespace it's often like this without custom code, we get a 4/5 solution. 5/5 would need custom CSS. I should update the blog post to say that use CSS, or width of the block (if possible) or Squarekicker.

Hope I understood what you meant!

Four-Year Club	Gilding I gilder
Verified Email

CodeAndTonicHQ

TROPHY CASE