TA-Analytics - Customizable Google Analytics “blocker”

TA-Analytics is a Alpine JS based plugin for activating user tracking after confirmation. The Google Tag Manager only gets initialized after the user accepts tracking.
We use cookies to measure the range of this website so we can easily see how many visitors are on our pages. This helps us a lot to further improve our services and adapt it more to your needs.
Thank you for your support...
Well, we have to deal with your decision...

TA-Analytics is made for every website that needs to have an easy and customizable Google Analytics “blocker”. TA-Analytics is 100% customizable and has endless animation options. You can use TA-Analytics as a stand-alone version as well as a part of your Alpine JS and Tailwind CSS project. TA-Analytics is designed to fit in every project, in every grid and in every flexbox so try it out and if you have some feedback - leave me a message: @markusantonwolf / Twitter

Very helpful for people targeting customers in Europe.

Features

Every content gets animated
Confirmation only - Loads Google Analytics only after user confirmation
Every content gets animated
Stores users choice - Remembers the users choice for revisiting
Every content gets animated
Anonymize IP - Anonymized IP address by default
Alpine JS logo
Based on Alpine JS - Small footprint and Vue JS inspired, like Tailwind for JavaScript
Tailwind CSS logo
100% Tailwind CSS - Rapidly build modern websites without leaving your HTML

TA-Analytics in action

If you are using TA-Analytics in the wild and want to see it in the following list just send me a DM on Twitter @markusantonwolf or mention me in a tweet.

Getting started with TA-Analytics

You have two options to start. TA-Analytics is based on Alpine JS and uses Tailwind CSS utilities and it runs best in this environment.

The best way: Tailwind CSS Plugin

From npm: Install package

# Install using npm

npm install --save-dev @markusantonwolf/ta-analytics

# Install using yarn

yarn add -D @markusantonwolf/ta-analytics

Adding TA-Analytics to your Tailwind CSS configuration is very easy. If you use Purge CSS to optimize your CSS files you have to add some class names to your whitelist / safelist. Here is an example configuration file which includes the plugin and safelist.

The TA-Analytics Tailwind CSS plugin generates all utilities for you. If you don’t want to use the plugin you can use the pre-rendered and minified utilities from the /dist folder.

// tailwind.config.js

const ta_analytics_safelist = require('./node_modules/@markusantonwolf/ta-analytics/src/plugin/safelist');

module.exports = {
    // ...
    purge: {
        // ...
        options: {
            safelist: [...ta_analytics_safelist],
        },
        // ...
    // ...
    },
    // ...
    plugins: [
        require('@markusantonwolf/ta-analytics')
    ]
    // ...
}

The fastest way: Not for production

From CDN: Add Alpine JS and TA-Analytics

<!-- into <head> -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<link href="https://cdn.jsdelivr.net/gh/markusantonwolf/ta-analytics@1.1/dist/ta-analytics.min.css" rel="stylesheet">

<!-- at the end of <body> -->
<script src="https://cdn.jsdelivr.net/gh/markusantonwolf/ta-analytics@1.1/dist/ta-analytics.min.js"></script>

Configuration

The way you can overwrite the default configuration is very simple. Just hand over your changes to the init function as an object or use data attributes. There is no need to define all options, just add the changes you want to have.

default: {
    id: 'XXXXX', // Add your Google Analytics ID
    name: 'taAnalyticsStorage', // Name of the cookie / local storage
    anonymize_ip: true, // Call Google Tagmanager with 'anonymize_ip' option
    send_page_view: true, // Call Google Tagmanager with 'send_page_view' option
    store: 'local', // Save feedback to 'storage' || 'cookie'
    days: 365, // Ask question again after these days
    delay: 5000, // Fade out feedback after these seconds
    test: false, // Development mode - doesn't save feedback
},

Change default configuration

Just add the changes you want to have and boom - 🌮.

<div
    x-data="taAnalytics()"
    x-init="init()"
    data-id="XXXXXXX"
    data-store="storage"
    data-test="true"
>

Basic structure

<div
    class="ta-analytics ta-analytics-anim-fade p-2"
    x-data="taAnalytics()"
    x-init="init()"
    data-delay="5000"
    data-store="storage"
    data-test="true"
    data-id="XXXXXXX"
    x-cloak
>
    <div class="w-full" x-show="show">
        <div
            class="w-full flex justify-center items-center bg-secondary-500 bg-gradient-to-t from-secondary-600 to-secondary-400 text-white font-normal leading-snug rounded-md shadow-lg px-8 py-4"
            x-show="dialog"
            x-ref="question"
        >
            <div class="w-full sm:w-3/4 text-center sm:text-left">
                We use cookies to measure the range of this website so we can easily see how many visitors are on our pages. This helps us a lot to further improve our services and adapt it more to your needs.
            </div>
            <div class="flex flex-col items-center w-full sm:w-1/4 m-4">
                <button
                    type="button"
                    class="font-bold text-xl rounded-xl leading-none text-white bg-primary bg-gradient-to-t from-primary-600 to-primary-400 border-2 border-primary shadow-lg text-md m-2 px-6 py-3 transition transform duration-300 ease-in-out hover:scale-110"
                    @click="accept()"
                >
                    OK
                </button>
                <button
                    type="button"
                    class="font-semibold leading-none text-xs text-white m-2 p-2"
                    @click="decline()"
                >
                    Decline
                </button>
            </div>
        </div>
        <div
            class="w-full flex justify-center items-center bg-secondary-500 bg-gradient-to-t from-secondary-600 to-secondary-400 text-white font-normal leading-snug rounded-md shadow-lg px-8 py-4"
            x-show="!dialog && confirmed"
            x-ref="confirmed"
        >
            <div class="text-2xl text-center font-normal leading-snug">
                Thank you for your support...
            </div>
        </div>
        <div class="w-full flex justify-center items-center bg-secondary-500 bg-gradient-to-t from-secondary-600 to-secondary-400 text-white font-normal leading-snug rounded-md shadow-lg px-8 py-4"
            x-show="!dialog && !confirmed"
            x-ref="declined"
        >
            <div class="text-2xl text-center font-normal leading-snug">
                Well, we have to deal with your decision...
            </div>
        </div>
    </div>
</div>

Predefined CSS

Starting with TA-Analytics is very easy because of the right amount of predefined classes. Learn more about how to use these classes.

ta-analytics

ta-analytics - Used to define some basic stuff and default CSS properties. Use this class on the base level of your Alpine JS component - the same level as your directives. The default position of the dialog is: bottom.

ta-analytics-anim-XXX

Used on the base level of the component. This class defines the style of the animation. Here is the list of all animation classes.

  • ta-analytics-anim-fade
  • ta-analytics-anim-swipe
  • ta-analytics-anim-flip

Position classes

Used on the same level as ta-analytics. These classes are used to change the default position of the user dialog and feedback.

  • ta-analytics-top
  • ta-analytics-right
  • ta-analytics-left

Functions

accept(): Function - Accepts user tracking and starts Google Tag manager - User feedback will be stored in the local storage or as a cookie.

decline(): Function - Refuses user tracking and does not start the Google Tagmanager - User feedback will be stored in the local storage or as a cookie.

Values

TA-Foodtrucks provides you with the following values so you can use it to improve the user experience.

show: Boolean - Gives you the information if a dialog should be shown. If there is a stored value from a previous visit this variable will be false.

dialog: Boolean - The value is true if the user hasn’t answered the question yet.

confirmed: Boolean - The value is true confirmed user tracking.

Helpful links

Alpine JS is a very easy to use and extremely light-weight JS Framework. You can say it is an “reduced” Vue JS so if you love Vue JS than this might be the right choice if you don’t need the whole functionality for smaller functionalities.

Tailwind CSS is a highly customizable, low-level CSS framework and it delivers in combination with PostCSS and Purge extremely small CSS files.

Why Tailwind CSS is my CSS framework of choice - If you’re sick of tweaking the CSS framework you are using, don’t want to override unwanted styles anymore and are a big fan of modularisation, then Tailwind CSS was made for you.

Alpine JS – like Tailwind CSS for JavaScript - Use plain JavaScript also known as Vanilla JS to make your server side rendered pages dynamically the way you can do it in Vue JS with only 8,4kb costs. Sounds great? Try Alpine JS.

Alpine.js devtools

TA Styled Plugins Logo
Explore all TA Styled Plugins and learn how to enhance your website fast and easy. All TA Styled Plugins stand for light-weight, responsive, mobile first and 100% customizable with endless animation options and are based on Tailwind CSS and Alpine JS.

TA Styled Plugins are licensed under the MIT license, see LICENSE for details.

Copyright © 2019-2021 Markus A. Wolf - www.markusantonwolf.com

Imprint | Privacy