Google Analytics for Click to Chat for WhatsApp Plugin

Google Analytics for Click to Chat for WhatsApp Plugin, using Google Tag Manager.

Google Tag Manager ( GTM ) have some Advantages, instead of directly hard-coded Google Analytics Scripts. There are so many reasons why this plugin supports analytics using GTM, instead of adding Analytics script in plugin itself.

Using GTM it’s completely in your control. You can set your desired Event Tracking parameters. ( Category , Action , Label )

From Version 1.6 – can enable Google Analytics, Facebook Analytics events and can customise values directly from Plugin Settings. ( This will work even Google Analytics installed using GTM )

pre-requisites

Google Analytics is installed using Google Tag Manager

 Install Google Analytics using Google Tag Manager

Useful stuff

Useful stuff to create events

All the styles contains “ccw-analytics” class name to track clicks

To get the style name, for all the styles added a data attribute
like – data-ccw=”style-{{number}}”
e.g. – data-ccw=”style-3″
for shortcodes data-ccw=”style-3-sc”

track events - thumbnail

Create an Event When user Clicks on Chat Item

Enable Build in Click Variables

From Google Tag Manager Container

enable build in variables

Click on “Variables” from the left side menu

and at “Built in Variables” click on “Configure

click events

From the right side modal – at the Clicks select the click variables what needed. ( only one thing is important here is  – “Click Classes” )

Create User-Defined Variables, to find data attribute value – ( To get the style number )

( This is not an important step – this will be useful to get the clicked style number, In most cases if you added a floating style – you know what style is added, so what the use to get the style number, but in case if you added shortcodes or A/B testing , this will be useful ) 

To find which Style item is clicked, This plugins adds a data attribute with the style name – data-ccw=”style-{{number}}” 

e.g.
For Floating Styles – data-ccw=”style-3″
For shortcodes data-ccw=”style-3-sc”

We will create a User-Defined Variable, to find the data attribute value

new user defined variables

From “Variables” and at “User Defined Variables” click on “New

select data layer variable

Click on “Variable Configuration” area

and then select “Data Layer Variable

data layer vairable - config

And at the “Data Layer Variable Name

Enter this  “gtm.element.dataset.ccw

gtm.element.dataset.ccw  – this will give the style type. 

Click on “Save

Create Triggers

Now we will create triggers where and when to fire ..

new trigger

From the Right side menu – click on “Triggers” and click on “New

select all elements

And then Click on “Trigger Configuration” area

and at the “Click” section, select “All Elements

class contains ccw-analytics

 

Now click on “Some Clicks”  ( we are tracking on clicks, where the clicked element contains “ccw-analytics” class )

and create a condition when to run this trigger

Click Classes”  –  “Contains”  –  “ccw-analytics

and click on “Save

Create Tags

so far, we enabled click variables, and we created a trigger and set a condition where to fire the trigger

And now we will create a Tag – In this we will Configure what the details have to pass to Google Analytics Account.

create tag

Click on “Tags” and then click on “New

create tag

Click on “Tag Configuration” area

and select “Universal Analytics – Google Analytics

( If you using Classic Analytics – ga.js –  select that option, mostly you might be using Universal Analytics only )

tag configuration

 

Select the “Track Type” as “Event

The “Event Tracking Parameters” is what you will get in Google Analytics, 

choose variables

 

( The [ + ] symbol right to the input box to choose Variables )

The Event tracking is hierarchy, Category and then Action and then label

( organised thing in a way how you will understand the events in Google Analytics –  we just added a sample )

Category  –  top level hierarchy (  WhatsApp or  click to Chat or similar )

Action  – second level hierarchy – (  on which style item, or similar )

To find which style item is clicked – click on the [ + ] symbol right to the input box to choose variable   ( In the above – we already created a variable to get the style number )

Label  –  Third level hierarchy  –  (  Page URL  – on which page the user takes action ) 

Google Analytics Settings  – Select the Google Analytics. where this event details have to send.

select trigger

Now Select the Trigger, where this tag have to run ( In the above – we already created trigger to fire – when click element class contains ccw-analytics )

tag configuration overview

Save changes,

preview, save

( preview – for verification on how things works, open your website in new tab in the same browser, we can preview how things are working. After preview click on leave preview ) and then “Submit

create version - publish

Publish and Create Version” to publish changes to your website

or navigate to “Create Version” tab to just save the change


Install Google Analytics using Google Tag Manager


In WordPress Websites instead of Directly installing Google Analytics in your Website, you can use Google Tag Manager. And if you have much Analytics and tracking tags you can consider using Google Tag Manager.

If you install Google Tag Manager in your Website, you can add, edit, delete scripts from your Google Tag Manager, instead of modifying from your website.

From Google Tag Manager we can install a number of scripts by creating tags and can install Google Analytics, AdWords Tracking, Facebook Analytics. There are some pre-build tags that make it easy to install some tools, or can use Custom HTML Tag to add scripts that are not pre-build in Google Tag Manager.

install google analytics using google tag manager

So no need to modify your website each time when you plan to install some scripts tools. Setup as a tag in GTM. GTM loads those scripts Asynchronous ( it won’t stop other web assets to load until finishing the loading scripts )

Sign up for Google Analytics

( If you have already created a Google Analytics tracking code skip this step)

Navigate to Google Analytics and click on signup,

signup - form

Choose Website,

Account Name –  An Account can have multiple Properties, Apps, and in that properties, can have multiple Views. Properties & Apps are where the Tracking code exists.

Website Name  –  for reference – Enter a name which makes it simple to identify your web property

WebSite URL  –  Enter your website URL, if you are using HTTPS, Don’t forget to select https:// instead of HTTP.

Industry Category  – Choose the best option, but this is not mandatory and does not affect tracking and data collection.

Reporting Time Zone  –  Select your local time zone, so it makes you comfortable to understand the analytic reports.

create account - sample filled

And then at the bottom of the page – click on “Get Tracking ID

Google Analytics - Tracking code

Tracking ID  – UA-115775302-1   useful to add analytics using tools, GTM.

Global Site Tag (gtag.js)  – To add directly in your Website  ( we use GTM to add Google Analytics )

At any time to Get the Tracking code

Install Google Tag Manager

Navigate to Google Tag Manager

gtm create account

Account Name  –  Add Account name for Reference ( An Account and then Container and then Workspace )

Enter the Account Name and choose the Country and click on Continue.

gtm create container

Enter the Container name, choose Where to use the Container and click on Create,

gtm code

Add this Google Tag Manager code on your Website.

The first part of the code is mandatory. Try to add this in between <head> tag, as much as possible ( it will work even if you added it in body tag ).

And the second part is not mandatory, if the user disabled the JavaScript this will be useful.

Get Google Tag Manager Code at Any Time

Install Google Tag Manager code in WordPress Sites

It may be better to install using a plugin or if your theme provides a way to add Google Analytics or Google Tag Manager it will be the best choice to install.

To Add Google Tag Manager hard-coding

From the WordPress Admin / Dashboard

Appearance -> Editor -> header.php ( most themes add <head> tags in header.php )

gtm add in wordpress sites

Add “Script” part of the Google Tag Manager Code in head tag

gtm code - script tag

And add “noscript” tag part after the opening body tag, now Google Tag Manager successfully installed on your website.

Connect Google Analytics to Google Tag Manager

Now we need to Connect the Google Analytics to Google Tag Manager. So that GTM Will load Google Analytics code Asynchronous
from the Google Tag Manager Container.

gtm - new tag

Click on “Tags” from the left side menu

click on “New

gtm new tag configuration

click on “Tag Configuration” area and then click on “Universal Analytics

gtm add universal analytics

Track View – leave it as the page view, to track page views.

Google Analytics Settings  –  Select “New Variable“, this is where Google Analytics have to link. If already attached then select that variable.

gtm add google analytics variable

At the “Tracking ID” Add the Google Analytics Tracking ID.

Click on “Save”  ( Give a name to this Variable – something like  – your Google Analytics Tracking ID, or just give a name like Google Analytics Settings )

gtm all pages trigger

And then Click on “Triggering” Area

And Select “All Pages“, to trigger the event on All Pages ( or click on + to add Create new Trigger, All pages is build in Trigger ).

gtm add google Analytics on all pages

Almost Done, before “Submit” the changes its better to test,

gtm preview, submit

click on Preview ( at the top-right side ),

In the same browser in a new tab, open your website. At the bottom of your web page, you can check the details of the Google Tag Manager and how it works.

gtm preview , new window

check on page view – event/summary, for what tags are fired, and check what Variables are available, Data Layer.

once done click on “Leave Preview Mode“.

Go Live

go live - publish or save

To make the change work, click on “Submit” and at “Publish and Create Version” add “Version Name” and “Publish“.

To just save the changes but not willing to publish, “navigate to “Create Version” tab, add “Version name” and Create a Version.

After publishing the changes, you can view Analytics at Google Analytics Dashboard

Get Google Tag Manager Code ( GTM Code ) at Any Time

To Get Google Tag Manager Code ( GTM Code ) at Any Time

Navigate to Google Tag Manager´╗┐

If you already Created containers, this page navigates to display all the containers list

container list

Select Container ( click on the container for which you like to get the code )

or

The same thing can select like this

container list - other way

click on "All Account" from the top bar and

select the correct "Tag Manager Account" and then "Container"

navigate to admin

And then Click on "Admin"

select tag manager code

At the "Container" section Click on "Install Google Tag Manager"

gtm code

Now we got the Google Tag Manager code

Next

The "script" part have to add inside the head tag, and "noscript" tag have to add in after opening body tag

Install Google Analytics using Google Tag Manager