vue click event broken after adding google analytics event?

Question

I have a click event in vue on a link that laucnhes a modal, the modal has a link the directs user to another site. Everything was working as expected until I just added a google analytics click event. Now the modal opens but the link to another site is just going back to the homepage /root. is there a way to call both click events on the link without breaking?

Link that launches modal and link out:

             <a
              href="https://www.linkout.com"
              rel="noopener"
              @click.prevent="
                openInterstitial;
                $ga.event('link', 'click', 'ISI_link');
              "
              target="_blank"
              >www.linkout.com</a
            >

mixin method:

Vue.mixin({
  methods: {
      openInterstitial(event) {
        if (event) {
          event.preventDefault();
          this.$store.commit('modals/setInterstitialHref', event.target.href);
        }

        this.$store.commit('modals/setShowInterstitial', true);
      }
    }
  });

store

export const state = () => ({
  interstitial: {
    show: false,
    href: ''
  }
});

export const mutations = {
  setShowInterstitial(state, boolean) {
    state.interstitial.show = boolean;
  },
  setInterstitialHref(state, string) {
    state.interstitial.href = string;
  }
};

Florian Pallas · Accepted Answer · 2020-11-20 19:41:27Z

1

I reproduced your issue and it seems like your openInterstitial method doesn't get called at all. The problem is that you use that method to access the event data (usage without parentheses). Because of that you can't chain them like you did, it just won't get executed. You can only leave out the parentheses if you use a single handler.

What you can do instead is to use your method with parentheses and pass the event data with $event (Docs).

@click.prevent="
  openInterstitial($event);
  $ga.event('link', 'click', 'ISI_link');
"

That way you can access the event data and chain multiple methods. Hope that fixed your issue!

edited Nov 20, 2020 at 19:41

answered Nov 20, 2020 at 19:18

Florian Pallas

5821 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue click event broken after adding google analytics event?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related