Mixpanel + Webflow

Design help General
1

Anyone have experience using Mixpanel with Webflow? Just looking for a little advise on how to build in the custom code for specific actions, e.g. mixpanel.track(“Video play”). Is this something I would tackle in the custom attribute setting?

I know someone asked about this back in Sept., but I wasn’t able to find a response.

Thanks in advance for any help.

Cheers,
Matt

2

You can use the onclick event handle to trigger Mixpanel events: onclick Event

For example:
<button onclick="mixpanel.track('Clicked button')">Open Sesame</button>

1 Like
3

Amazing, thanks for the swift response brryant. Just to confirm, the onclick handle is still a reserved name in custom attributes, right?

I’m inputing the workaround here now, so I’ll report back on progress. Just wanted to make sure I wasn’t missing anything.

4

Yup I forgot about that - the workaround you pointed to works great and we’ll write up some support content specifically for Google Analytics and Mixipanel

EDIT - http://help.webflow.com/faq/integrate-google-analytics-and-mixpanel-into-your-website

5

Perfect, thank you! So, the trackers are working on the main page, but I can’t seem to get a signal from the secondary pages. Would I structure the code in the same way for buttons that aren’t on the home page?

Currently, I have the following for each mixpanel action, regardless of page:

<script>
  $(document).ready(function() {
    $('#BUTTON-SPECIFIC-ID').on('click', function(e) {
      mixpanel.track("MIXPANEL SPECIFIC TAG");
    });
  });
</script>

Apologies in advance, I’m not overly technical so this is all rather new for me. Thank you again and cheers!

6

False alarm, this works. Hopefully it’s helpful for others as well.

Looking forward to any tutorials on the subject too. Cheers all!

7

Just saw the new GA help at Webflow FAQ. Super helpful, thank you. I was wondering if anyone had an example of Global Click Handler for Mixpanel? I can’t seem to convert the example code for GA into something that fires for Mixpanel.

Any and all help appreciated. Thanks again and hope everyone’s well.

1 Like
8

I’m in the same boat as @wmdukes. Complete novice here, I have no idea how to take what was mentioned for GA and use it for Mixpanel. Anyone gracious enough to post that?

Specifically, looking for what code is needed (other than mixpanel tracking code) to fire specific events when pages are loaded or buttons are clicked.

1 Like
9

Hi Folks!

If anyone has the answer could they share it with us. The Webflow user guide is still Google specific and I cannot get mixpanel to pick up the onClick event. I started the first discussion back in sept and basically gave up on mixpanel, that was until I came across this thread.

@wmdukes did you get it working in the end? @brryant do have mixpanel specific code/examples we can use?

Thanks in advance!

10

Have you tried the code snippet that @wmdukes included above?

You’d have to install the library properly of course in the <head> section as documented here: SDK Integration: JavaScript Advanced | Mixpanel Developer Docs

11

Ok, ended up just paying someone to handle both MP and GA for me. Here’s what I have now, feel free to copy it and use it for your purposes. I’m tracking everything (pageviews and clicks) in both GA and MP, which is not really necessary, apparently. Oh well.

If you have questions… I probably can’t answer them. Hence the “paid someone to do this for me”. :grinning:

This is in my Custom Code section, in the Footer Code area:

<!-- Track Events To GA and MP -->
<script type="text/javascript">
  $(document).ready(function() {
    $(document).on('click', '[data-tracker]', function(e) {

      var trackData = $(this).data('tracker');
      if (!trackData) { return; }

      var tagData = ParseTagData.tagData(trackData);
      if (!tagData.action || !tagData.label ) { return; }

      Track.trackEvent('click', { action: tagData.action , label:  tagData.label });
      });

    var ParseTagData = { tagData : function ( data ) {
      var tmpData = data.split("|");
      if (tmpData.length !=2 ) { return ""; }
      return { "action": tmpData[0] ,"label": tmpData[1] };
      }
    };

    var Track= { trackEvent: function (eventType, data) {
      console.log(eventType, data.action,  data.label);
      ga('send', { hitType: 'event', eventCategory: eventType, eventAction:  data.action, eventLabel: data.label});
      mixpanel.track( data.action );
      }
    };
  });
</script>
<script type="text/javascript">
mixpanel.track('page viewed', {
    'page name' : document.title,
    'url' : window.location.pathname
});</script>

And for every click I want tracked, I only need to add this to the Custom Link Attributes for that link:

Name field: “data-tracker”
Value field: “Page_Element_Action|Page” so an example for a click on the “enroll in the basic membership” button on my home page would be “Home_EnrollBasic_Click|Home”.

969×211 20.2 KB

I can now build goals and funnels around page views and click events in both Mixpanel and GA.

woot.

Hope this helps you!

EDIT: Make sure you have the Universal tracking code for GA and your MixPanel codes in the head section of your custom code page.

5 Likes
12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.