Custom Event Goal Tracking in Wordpress with Elementor

[foligo]

Hey there,

I want to implement the custom event goal tracking (https://plausible.io/docs/custom-event-goals) on my Wordpress website which runs Elementor. Things get kind of tricky as Elementor renders all custom link attributes (https://elementor.com/help/custom-link-attributes/) from wx|yz to wx="yz" but plausible says, "Do watch the quotes! The data-analytics tag value should have both single and double quotes as shown above."

Does anyone have some experience to share how she or he has managed this challenge?

Thanks a lot in advance and best wishes,

[Vigasaurus]

I can't say I've used Elementor, but from the docs it seems like you should be able to pass in data-analytics|"Custom Event" and it should get parsed as <a data-analytics='"Custom Event"'> (which is what you'd want). This is just speculation given my brief look at the Elementor docs, but it's worth a shot.

Note: You might need to use single quotes instead in the example above - depending on how Elementor parses it and which quotes it already uses for wrapping the entire value.

[foligo]

Thx so much @Vigasaurus for your quick reply.

When I paste data-analytics|"Custom Event" it get parsed to data-analytics|""Custom Event"" -> it looks like this when watch the code with inspector. But when I click in it, also in inspector, it changes to ' " Custom Event " '. And this works, so the event is sent to plausible.

But I'm not able to sent properties with it ex.:
Insert: data-analytics|"kontakt-button", {"props":{"location":"header"}}"
Parsed: data-analytics='""kontakt-button"' props=""

Do you have any idea how to fix this issue?

Thx a lot and best wishes,

[Vigasaurus]

Unfortunately, I don't think you'd be able to do custom properties in this manner with Elementor, as to do custom properties you have to have a comma in there separating the goal name and the custom props, but this Elementor field will always parse the comma as the delimiter between two attributes, splitting it in the wrong place and breaking it.

I don't know much about Elementor so I don't know if there's a different way to apply attributes, but this way almost certainly won't work for custom properties.

[GDXFred]

I`m also looking for a way to track events on a site running Elementor.
Any news regarding this?

[ThomasKoscheck]

Hi everyone 👋

Just wanted to check in on this — is there any update or workaround available?

With Elementor powering over 10 million active installations, I imagine there's significant demand for native event tracking with Plausible. I've been trying to find a clean solution for a while now without much luck.

Would love to help test if there's a beta or contribute to documentation if that's useful.

[Dan0sz]

Hi @ThomasKoscheck! Thanks for reaching out! Can you share an URL to an Elementor form as an example or at least examples of custom attributes you'd like to track? That way I can test if modifications need to be made to the plugin to add native support.

Looking forward to your reply!

[ThomasKoscheck]

Hi,
you can check the button called "Partner werden" at the top right corner of this page: https://sec-auditor.com

I added the plausible data in Elementor as you can see in this screenshot

which renders this HTML

<div class="elementor-element elementor-element-e4bc264 elementor-align-center elementor-widget__width-auto elementor-hidden-mobile plausible-event-name=registration elementor-widget elementor-widget-button" data-id="e4bc264" data-element_type="widget" data-e-type="widget" data-widget_type="button.default">
   <div class="elementor-widget-container">
      <div class="elementor-button-wrapper">
         <a class="elementor-button elementor-button-link elementor-size-sm" href="https://sec-auditor.com/partner/">
            <span class="elementor-button-content-wrapper">
               <span class="elementor-button-text">Partner werden</span>
	   </span>
	  </a>
	</div>
    </div>
</div>

[Dan0sz]

Hi @ThomasKoscheck,

I just tested this with Elementor Pro 4.1.1 and it does seem to work on my end!

Here's what I did:

• Added a button, by going to Add Element > Basic > Button.
  
• Edit Button > Advanced
  
• Added plausible-event-name=test_param to the Layout > CSS Classes option.
  

So, in your case, moving plausible-event-name=registration to the CSS Classes option should work!

If I missed anything, or if there's anything else to test, please let me know! I'm not super familiar with Elementor, so it's very possible I missed something! 😅