TA-Styled-Plugins
TA-Analytics component 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
If you are using TA-Analytics component 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.
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.
From npm: Install package
# Install using npm
npm install --save-dev @markusantonwolf/ta-analytics
# Install using yarn
yarn add -D @markusantonwolf/ta-analyticsAdding 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')
]
// ...
}
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>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
},
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"
><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>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 - 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.
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-fadeta-analytics-anim-swipeta-analytics-anim-flipUsed on the same level as ta-analytics. These classes are used to change the default position of the user dialog and feedback.
ta-analytics-topta-analytics-rightta-analytics-leftaccept(): 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.
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.
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.
TA Styled Plugins are licensed under the MIT license, see LICENSE for details.
Copyright © 2019-2022 Markus A. Wolf - www.markusantonwolf.com