In our Vue.js app, we’ve create a component, which we pass the CTA link, and this component will create the element and load the CTA scripts, includint the hbspt.cta.load.
We can see the views in our CTA analytics but we can’t see the number of clicks. Is there anythine else we have to do?
Below I have an example of our component:
<template lang="pug">
a(:class="buttonClass",
:href="hubspotCtaHref",
:target="target",
:title="title")
i.el-icon.m-r-10(v-if="icon", :class="`el-${icon}`")
span(v-if="!$slots.default", style="margin-left: 0")
| {{ text }}
slot
</template>
<script>
export default {
name: 'HubspotCtaButton',
components: {
Animation,
},
props: {
text: {
type: String,
default: 'Save',
},
buttonClass: {
type: String,
default: '',
},
title: {
type: String,
default: '',
},
target: {
type: String,
default: '_blank',
},
icon: {
type: String,
default: '',
},
hubspotCtaHref: {
type: String,
required: true,
default: '',
},
hubspotCtaOptions: {
type: Object,
default: () => ({}),
},
},
mounted() {
// We get the params from the link (so it's easier for the user)
// The CTA link should look like:
// https://cta-redirect.hubspot.com/cta/redirect/2853558/caccc178-4b51-40e6-9b18-6f1f53281a60
const fragments = this.hubspotCtaHref.split('/');
$.getScript('https://js.hscta.net/cta/current.js', () => {
window.hbspt.cta.load(Number(fragments[5]), fragments[6], this.hubspotCtaOptions || {});
});
},
};
