Hopefully someone can help us out here. We've asked via support ticket, but were directed to this forum.
We need to add a class to a button such that we can track clicks in GTM/GA. We have created the button macro below. The problem we're finding is that the class "avatar-follow" seems to be stripped out during processing by XF Javascript.
Alternately, we tried replacing the <xf:button> with an <a ...> tag and just data-xf-click="overlay". However, this has not worked the way we expected in that in Chrome and Opera (but not Brave) it not only fires the overlay but then redirects the user through to the overlay page.
Can you suggest the best way for instrumenting the button class, or another approach?
<xf:macro name="bf_member_action_buttons" arg-user="!" arg-context="!">
<xf:if contentcheck="true">
<div class="buttonGroup">
<xf:contentcheck>
<xf:if is="$user && !$xf.visitor.isFollowing($user) && $xf.visitor.canFollowUser($user)">
<xf:button href="{{ link('members/follow', $user) }}"
class="button--link avatar-follow"
data-xf-click="overlay"
data-sk-follow="{{ phrase('follow') }}">
{{ phrase('follow') }}
</xf:button>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</xf:macro>
We need to add a class to a button such that we can track clicks in GTM/GA. We have created the button macro below. The problem we're finding is that the class "avatar-follow" seems to be stripped out during processing by XF Javascript.
Alternately, we tried replacing the <xf:button> with an <a ...> tag and just data-xf-click="overlay". However, this has not worked the way we expected in that in Chrome and Opera (but not Brave) it not only fires the overlay but then redirects the user through to the overlay page.
Can you suggest the best way for instrumenting the button class, or another approach?
<xf:macro name="bf_member_action_buttons" arg-user="!" arg-context="!">
<xf:if contentcheck="true">
<div class="buttonGroup">
<xf:contentcheck>
<xf:if is="$user && !$xf.visitor.isFollowing($user) && $xf.visitor.canFollowUser($user)">
<xf:button href="{{ link('members/follow', $user) }}"
class="button--link avatar-follow"
data-xf-click="overlay"
data-sk-follow="{{ phrase('follow') }}">
{{ phrase('follow') }}
</xf:button>
</xf:if>
</xf:contentcheck>
</div>
</xf:if>
</xf:macro>