Trying to link a few buttons to Google Analytics

Hey everyone,
Trying to link up a few buttons in the visual studio to our google analytics. We are using a dynamic value for the class name but it seems to be injecting that value into a pre named plasmic class. Something like “plasmic_all_default_class” etc. does anyone have any tips on setting these buttons up for GA?

Hi @digital_cow, are you setting the className like this?

Yes, I’m setting it up that way using dynamic values I’m pulling from the CMS. I’m not sure if it’s a GA issue or just user error on my part, but none of the clicks are tracking. I’ve done the same with using a DV as an ID and that doesn’t work either.

  1. Do you see the added class in your final markup? (As shown in the video, I added xyz and was able to find it in the final HTML)
  2. If you just add a page in your site codebase containing <button className="xyz">blah</button> , i.e. not using Plasmic, does that work with the GA setup?

Hi Zach, I spotted the issue - you’re right, it is indeed due to some extra nesting of elements. This is what I see - there’s a button containing a link nested inside of it.

Some solution steps:

• You shouldn’t need a raw HTML button - you should only need links.
• Try to remove the nesting of the link in the button (or a link in a link, so don’t just change the button to a link) - i.e., there should be just one link. That will cause issues with SSR as it’s malformed HTML. (We’ll introduce a feature to help you detect these illegal nests)
• The id and class were on the button, but these should be placed on the link instead.
• You can consider using the built-in Button component (instead of a raw HTML <button>) which you can customize and which will behave either as a link if you have a URL specified, or a normal form button otherwise.

Thank you so much for the timely response @yang As always, we very much appreciate everything you’ve helped us with. @precious_cockroach we can try this fix and see if we can get rolling with analytics?

@yang following up here.

Our site matches what we see in the studio on every browser except Safari on desktop, where it’s completely broken:

Any ideas on what’s happening here? Is that a known issue?

(nadimama.com)