release v1.0.0

README.md

@@ -1,2 +1,66 @@
-# divi-button-event-tagger
-Insert missing data-vars for Google Analytics events in Divi theme builder.
+# Link and Button Tagger for Divi
+
+This is a simple WordPress plugin that inserts missing Google Analytics data-vars attributes for divi buttons
+
+---
+
+## Description
+
+Once this plugin in installed and activated it will find any Divi theme builder inserted button and insert missing Google Analytics tracking tags.
+
+Buttons that are added using Divi are missing any id field and as such can make it difficult to track automatically.
+
+Some theme builders, such as Divi, don't provide a way for users to insert these attributes easily (or at all in some cases). 
+
+This plugin automatically finds the button css class and inserts the missing attributes (found below) so as to make the buttons trackable in Google Analytics.
+
+The results in Google Analytics appear as behavior events as `Page title - button name`.
+
+### Inserted Tags
+
+```
+data-vars-ga-action
+data-vars-ga-label
+data-vars-ga-category
+```
+
+
+## Installation and Usage
+
+1. Options to install the plugin
+   1. Install through the WordPress plugins page (recommended)
+   2. Manually upload contents of the plugin zip and uploading to /wp-content/plugins/divi-button-event-tagger/ folder
+2. Activate the plugin in the 'Plugins' page.
+3. Once installed and activated, the plugin runs automatically for all pages on your WordPress site.
+4. A `button_event_selector` filter is available if you need to use this with other theme/page builders.
+
+### Example button_event_selector Filter
+
+```JS
+function my_custom_button_event_selector($query_selector) {
+    return '.some_other_class';
+}
+add_filter( 'button_event_selector', 'my_custom_button_event_selector' );
+```
+
+---
+
+## Example Divi Source
+
+This plugin is orginally intended to work with Divi. It can, however, be adapted with any theme/page builder as it is looking for a specific class attribute which can be adjusted.
+
+### Default
+
+No attributes set.
+
+```html
+<a class="et_pb_button et_pb_more_button et_pb_button_one" href="https://URL.com/contact-form">Get Started Now</a>
+```
+
+### After the Tagger is Activated
+
+Google Analytics attributes set.
+
+```html
+<a class="et_pb_button et_pb_more_button et_pb_button_one" href="https://URL.com/contact-form" data-vars-ga-category="cta" data-vars-ga-action="click" data-vars-ga-label="Get Started Now">Get Started Now</a>
+```

divi-button-event-tagger.php

@@ -0,0 +1,53 @@
+<?php
+
+/**
+ * Divi Button Event Tagger
+ *
+ * @link              https://github.com/Spcktr/divi-button-event-tagger
+ * @since             0.1.0
+ * @package           Divi_Button_Event_Tagger_Plugin
+ *
+ * @wordpress-plugin
+ * Plugin Name:       Divi Button Event Tagger
+ * Plugin URI:        https://github.com/Spcktr/divi-button-event-tagger
+ * Description:       Insert missing data-vars-ga attributes for button links. This will help Google Analytics tracking buttons for themes like Divi.
+ * Version:           1.0.0
+ * Author:            Sprckt
+ * Author URI:        https://github.com/spcktr
+ * License:           GNU General Public License v3
+ * License URI:       https://github.com/spcktr
+ * Text Domain:       divi-button-event-tagger
+ */
+
+// If this file is called directly, abort.
+if (!defined('WPINC')) {
+    die;
+}
+
+define('DIVI_BUTTON_EVENT_TAGGER_PLUGIN_NAME', 'divi-button-event-tagger');
+define('DIVI_BUTTON_EVENT_TAGGER_PLUGIN_VERSION', '1.0.0');
+define('BUTTON_EVENT_SELECTOR', '.et_pb_button'); // Default for Divi.
+
+/**
+ * Enqueue the Link Helper JavaScript Library
+ * and Inline Script
+ * 
+ * This supports the button_event_selector filter.
+ */
+
+function enqueue_divi_button_event_tagger_javascript()
+{	
+    wp_register_script( DIVI_BUTTON_EVENT_TAGGER_PLUGIN_NAME, plugin_dir_url( __FILE__ ) . 'public/js/' . DIVI_BUTTON_EVENT_TAGGER_PLUGIN_NAME . '.js', '', DIVI_BUTTON_EVENT_TAGGER_PLUGIN_VERSION, true );
+    wp_enqueue_script( DIVI_BUTTON_EVENT_TAGGER_PLUGIN_NAME );
+
+    $script = 'addDiviLinkTitles();';
+    wp_add_inline_script( DIVI_BUTTON_EVENT_TAGGER_PLUGIN_NAME, $script, 'after' );
+
+    $query_selector = LINK_HELPER_SELECTOR;
+    $query_selector = apply_filters( 'button_event_selector', $query_selector );
+    $php_vars = array(
+        'querySelector' => $query_selector
+    );
+    wp_localize_script( DIVI_BUTTON_EVENT_TAGGER_PLUGIN_NAME, 'php_vars', $php_vars );
+}
+add_action( 'wp_enqueue_scripts', 'enqueue_divi_button_event_tagger_javascript' );

public/js/divi-button-event-tagger.js

@@ -0,0 +1,16 @@
+function addDivibuttonevents() {
+    let elts = document.querySelectorAll(".et_pb_button");
+    if (elts === undefined || elts === "") return;
+    let eltsArr = Array.from(elts);
+    let docTitle = document.title;
+    eltsArr.map((elt) => {
+        try {
+            let btnTxt = elt.innerText;
+            elt.setAttribute("data-vars-ga-category", "button");
+            elt.setAttribute("data-vars-ga-action", "click");
+            elt.setAttribute("data-vars-ga-label", docTitle + ' - ' + btnTxt);
+        } catch (e) {
+            console.log("Divi Button Event Tagger did not fire correctly" + php_vars.querySelectorAll);
+        }
+    });
+})();