-
-
Hi there,
I want to track button clicks with Google Analytics. But I can’t find a way to add a custom class to a button.
The button is an
<a>
tag wrapped in a<div>
tag. The<div>
has a custom class, but not the<a>
. I need to add a custom class to the actual<a>
tag that contains the link.Can you help me?
Thanks!
- This topic was modified 4 years, 6 months ago by simeonkartov.
- This topic was modified 4 years, 6 months ago by simeonkartov.
-
Hi, Sure I can help you.
If you have an HTML-CSS background, you can add it yourself on includes/codeless_builder/shortcodes/cl_button.php
You can change the extra class parameter from the DIV to A element
If you can’t, just send me credentials
Thanks
-
-
Hi there,
Explain to me what exactly I have to do, please.
I want exactly that to move the extra CSS class to the A element, not the div.
Thanks!
SK -
I see I have to update this block of code:
<div class="cl-btn-div cl-element <?php echo esc_attr( $button_id ).' '.esc_attr( $this->generateClasses('.cl-btn-div') ) ?>" <?php $this->generateStyle('.cl-btn-div', '', true) ?>> <a href="<?php echo esc_url( $link ) ?>" target="<?php echo esc_attr( $link_target ) ?>" class="<?php echo esc_attr( $this->generateClasses('.cl-btn') ); ?> <?php echo esc_attr( $extra_classes ); ?>" <?php $this->generateStyle('.cl-btn', '', true) ?> > <span><?php echo cl_remove_empty_p( cl_remove_wpautop($btn_title, true) ) ?></span></a> </div>
Send me the updated code please.
-
Can I add my custom classes?
For example, I have the same download button that appears on 4 different pages. I have to create 4 different google analytics events for this button as it always has different custom class to it.
I want to add the same class to different buttons on different pages. Is this possible?
Thanks!
-
I managed to move the custom class form the div to the a. But the problem is that the class autogenerates on each refresh. I cannot use it for tracking.
Can we make it to generate a custom class and keep it like this?
-
Sure,
I will help you to add a custom param.
go to includes/codeless_builder/config/cl-page-elements.php and search into
file for ‘cl_button’
at that block, after this “‘fields’ => array(” and before “‘btn_title’ => array(” add this block of code:
'custom_user_class' => array( 'type' => 'text', 'priority' => 10, 'reloadTemplate' => true, 'label' => esc_attr__( 'Custom User Class', 'folie' ), 'default' => '', ),
then go back to cl_button.php and replace the file with:
<?php if ( ! defined( 'ABSPATH' ) ) { die( '-1' ); } $output = ''; $atts = cl_get_attributes( $this->getShortcode(), $atts ); extract( $atts ); $button_id = 'cl_btn_div' . str_replace( ".", '-', uniqid("", true) ); $extra_classes = codeless_button_classes(''); ?> <div class="cl-btn-div cl-element <?php echo esc_attr( $button_id ).' '.esc_attr( $this->generateClasses('.cl-btn-div') ) ?>" <?php $this->generateStyle('.cl-btn-div', '', true) ?>> <a href="<?php echo esc_url( $link ) ?>" target="<?php echo esc_attr( $link_target ) ?>" class="<?php echo esc_attr( $custom_user_class ) ?> <?php echo esc_attr( $this->generateClasses('.cl-btn') ); ?> <?php echo esc_attr( $extra_classes ); ?>" <?php $this->generateStyle('.cl-btn', '', true) ?> > <span><?php echo cl_remove_empty_p( cl_remove_wpautop($btn_title, true) ) ?></span></a> </div> <?php if( $overwrite_style ): ?> <style type="text/css"> .<?php echo esc_attr($button_id) ?> a:hover{ background-color: <?php echo esc_attr( $button_bg_color_hover ) ?> !important; color: <?php echo esc_attr( $button_font_color_hover ) ?> !important; } </style> <?php $extra_classes = 'cl-btn'; endif;
This should help you
Thanks -
-
You’re welcome :)
If you like our theme and support, leave us a rating on Themeforest, it’s very important for us :)
https://themeforest.net/downloads
Thank You so much
-
You must be logged in to reply to this topic.