How to enhance Google Adwords and Analytics Integration

Google Adwords and Analytics Integration- What is the objective of the blog post –

In this post you will learn how to customize your Google Adwords and Analytics Integration to link your campaign information to other areas of your site apart from landing page and conversion.

How it makes life easier –

With standard integration, one can analyse the performance of Adwords campaign along with the landing URL in terms of cost, conversion and revenue. But, what if you have other variables in the user journey that you are testing apart from the lander?

By using this customization technique you will be able to analyze how combination of your adword campaigns and other areas of your site are affecting the conversion and analyze the complete picture.

Real life scenario –

Suppose an eCommerce company is using Google Optimize to test its landing pages as well as product details pages.

The company want to see which adwords groups, lander and product page combinations are delivering the best results in terms of order conversions.

For this they create a google sheets dashboard to automate the report for analysis through the Google Analytics Addon like this :

Now, with standard integration the company will not be able to see this entire journey and will miss out on some critical information and they will rather see this ugly error:

But, they don’t need to lose hope. DataVinci to rescue. Lets get cracking.

What is the recipe?

Ingredients:
  • 2 custom dimensions sanctioned at session scope (There can be more dimensions depending on the number of variables you are playing with)
  • Custom parameters in landing URL of Google Adwords campaign
  • 3rd Custom dimension to capture the Google Adwords custom parameter. Again, set at session scope
Method:

First, enable the custom dimensions from the Google Analytics admin. Name them appropriately and note down their index numbers. Make sure to set their scope at session level.

Next, customize your Google Adwords campaign parameters by passing in any campaign related information that you want to test. Let’s assume this information is ad group and you are passing this in “_adgroup” parameter.

This video tutorial provides the steps to update the custom parameters in Google Adwords :

Now, customize your Google Analytics implementation to capture the data in the respective dimensions.

This video tutorial provides steps to setup Google Analytics custom dimensions through Google Tag Manager.

https://www.youtube.com/watch?v=so3_bKY0mnM

Now what?

Ok, so when you set a custom dimension to a session scope, the last value that gets passed into it in a session gets associated with all the hits of that session. So, visualize this scenario in your head:

A visitor enters your site from your Google Adwords campaign. You have very smartly passed in custom information through custom url parameters in your landing URL. Your Google Analytics account captures this custom parameter information and stores it in a custom dimension, and since this custom dimension is set at a session scope, all the hits in your visitors sessions can be viewed against this value.

Also, on this landing page, we are capturing the landing URL in another custom dimension set at session scope. That means this information will also be available to be used with other data points captured through out the session.

Next, if the user navigates to the products page, we are capturing the version of the product page url as well and that too again in the session scope.

Now we have the three important dimensions which we want to see together broken down by the conversion metrics to make a decision. And this is how the report will look now:

Through the above minimal setup, the eCommerce company can clearly analyze which combinations are working better than others and push them to the broader audience.

Sweet.

Hope you liked this post on customizing your Google Adwords and Analytics Integration

How can we people?

Google Analytics is a very powerful tool when setup correctly. It can be customized to great extents and provide sensational insights to optimize your digital assets.

If you need help with this, then we are a crazy team of Google and Adobe Certified Analytics Experts who eat, breathe, sleep and dream Analytics. And we’ve made it our purpose and passion to electrify your business’s potential through Analytics.

Contact us here.

Found it informative? Leave a comment! You can also give us a thumbs up by sharing it with your community. Also did you know that you can light up our day by subscribing to our blog? Subscribe here –

What is an affiliate website

Have you been researching affiliate marketing? Maybe you’ve heard it’s a great way to make money online and are interested to learn more about what is an affiliate website.

Or maybe you want to know how you can make your own income producing affiliate website today.

People want to know about affiliate marketing and how it works.

Why is this a hot topic?

Because affiliate websites can make you a ton of money.

And the majority of affiliate marketing programs require that you have your own website in order to join their affiliate network.

Another major perk to creating an affiliate website is that it is a very inexpensive business to start up.

You can look at the cost difference between an affiliate business and a traditional “brick and mortar” business right here.

You’ll see two major differences between these two business models.

Most notably, the cost of start-up and the implied risk.

We’re talking under $500 to $1,000 dollars for the first year of an affiliate website business verses $10,000 to $100,000 dollars for a traditional business.

With an affiliate website business, your risk is low and your earning potential is quite high.

Now there are a good amount of factors that go into making a successful affiliate website (and I’ll discuss this later below) but if you can imagine the potential in affiliate marketing, then you’re halfway there.

In today’s post, we’ll discuss:

  • The benefits to owning your own affiliate website.
  • What it takes to create a successful online business.
  • And give you a step-by-step guide to create your own successful affiliate website.

What Is An Affiliate Website Exactly?


An affiliate website is any website or blog that utilizes affiliate marketing techniques.

So what does that mean?

What Is An Affiliate Website photo

Well, any website with advertisement banners is a form of affiliate advertising.

Also, text links.

Whenever you see a link that takes you to a website where you can purchase a product or service, again, is another style of affiliate marketing.

Affiliate marketing is performance based advertising.

In other words, an affiliate website will only receive a commission if the visitor they send goes on and makes a purchase.

So for example, you click on a link from one of your favorite blogs or websites and that link sends you off to say…Amazon.

Or any eCommerce website for that matter where you can purchase…

  • Products
  • Services
  • Educational Classes, etc.

Then if you buy something from Amazon, the affiliate site would earn a commission from whatever products you purchase.

In affiliate marketing, there are four players.

1). The Merchant – The person providing the product or service. In our example above, this would be Amazon.

2). The Affiliate Network – Contains the products from the merchant or a series of merchants.

They also handle the payments and sales commissions. Again in our example, this would be a subsidiary company of Amazon, called Amazon Associates Program.

3). The Publisher – This would be the website owner who is publishing the content to market the product. If you look at my article, Does Amazon Sell Fake Products, and click on my Amazon link for the most popular computers, then go to Amazon and buy a computer, I would be the Publisher in this example who receives the Amazon commission.

4). The Customer – This would be the website visitor that clicks on the Publisher advertisement and then is taken to the sales page of the Merchant.

If you clicked my link above and bought something from Amazon, then you’d be the customer.

Affiliate marketing websites use tracking links and banners throughout their websites to market products.

If the website sees a lot of traffic, that means more potential customers which equates to higher potential sales and increased revenue for you.

Building affiliate websites is an art form. It’s far more than just throwing up a bunch of banner ads and affiliate links throughout your website.

Hope this was helpful.

Subscribe to our blog to receive regular content like this.

 

 

 

How to detect mobile device on Google Tag Manager, DTM & Tealium

Wwwhhhooaaaa this form looks perfect AF! Lemme check how it looks on mobile ???

Mobile responsiveness is a task, isn’t it? The most beautiful features on desktop, might sometimes appear disastrous on a mobile device. If a similar situation is ruining the mobile experience of your website, and you’re looking for a way to show certain features only to your desktop audience or vice versa, here’s how you can do it.

I’ll be helping you detect the device type of your visitors and use that data to serve different (and pleasant) experience on different devices (desktop and mobile).

Following is a detailed procedure on how you can achieve it using Google Tag Manager, but we will also talk about how you can do it on Dynamic Tag Manager by Adobe, and Tealium. Let’s get started!

Detecting a Mobile Device on Google Tag Manager

We’re going to divide the job into three parts.

I – Variable creation
II – Trigger creation
III – Application

I – Creating a variable

We’re creating a variable which returns the value true for a mobile device, and false otherwise. This variable is our device detector!

1 – On your GTM dashboard, go to Variables and click on New.

2 – Give a relevant name to your variable, and under the Variable Configuration, choose Custom JavaScript. I’ve named my variable as Device Check.

3 – Thanks to http://detectmobilebrowsers.com, which is an open source for mobile detection scripts in various programming languages, we can get a JavaScript snippet for our variable. Choose JavaScript and save the .txt file. Then just copy the entire code from the file and paste it as the custom JavaScript of your variable.

Alternatively, you can also just copy the script from here.

function () {
 var a = navigator.userAgent || navigator.vendor || window.opera;
 if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) { return true; }
 return false;
 }

Paste the above code as the custom JavaScript of your variable and click Save. Our variable has been created!

II – Creating a Trigger

Now that we’ve detected the device type, this triggers our next action : Decide what our visitor gets to see! Based on the value returned by our variable, i.e., true for mobile and false for desktop, we’ll create a trigger.

1 – On your Google Tag Manager dashboard, go to Triggers and click New.

2 – Name your trigger and under Trigger Configuration, choose Custom Event.

3 – Since we want this trigger to fire at every page hit, under Event Name, type .* and check the checkbox to enable Use Regex Matching.

4 – Now is when our variable and trigger come together. From the two radio buttons, choose Some Custom, and apply condition to include or exclude a mobile device. To exclude a mobile device, we want to go ahead with devices that return false to our variable. This is what our condition must look like –

The above condition excludes mobile devices. If you want to exclude desktops/tablets, you can put the value true in the last field.

So now, we’re ready to finally achieve our goal of excluding/including mobile devices!

III – Application

The whole idea behind this article came from our own experience with a pop-up form that worked just fine on my laptop, but fucked up on mobile devices. We wanted to hide the form from our mobile audience, solved it and thought you might need the solution some time! And so the example application here, is a Mailchimp subscriber pop-up form that we added to our website by creating a tag on Google Tag Manager. Here’s the tag without any trigger exceptions –

We edited the Triggering settings of our Mailchimp tag, and of course employed the trigger we created in Step II. To add a trigger to your tag, click the Triggering tab and choose the trigger you created earlier for the task (Step II). That’s all!

DIY – Test our form on your desktop and mobile device! Open datavinci.com on private window of your browser.

So that’s how you can use Google Tag Manger to detect device types. Let’s see how you can achieve it on DTM (Adobe’s Dynamic Tag Manager)

Detecting a Mobile Device on Dynamic Tag Manager or Adobe Launch

On DTM or Launch, the process is much simpler. While creating any kind of rule, you get an inbuilt condition to select the device type. Just select the device for which you want to fire the tag from the drop down, as shown in the screenshot below :

DTM mobile device rule

You see? It’s that simple!

Detecting a Mobile Device on Tealium

In Tealium, it is not as straight forward as Adobe, but it’s still pretty simple. Following are the steps:

1 : Adding data source
Create 2 Data Layer elements:
  • device_mobile
  • device_tablet

(You can name them whatever you feel suits your business logic)

Step 2: Fill up your data layer values using a javascript extension

 

  • Select the add extension option -> Go to the ‘Advanced’ tab > Select ‘JavaScript Code’
  • Name your extension and paste the following code in the configuration field.
    // global var to detect mobile devices based on user agent
    utag_data.device_mobile = ((function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))return true})(navigator.userAgent||navigator.vendor||window.opera))?'true':'false';
    
    // global var to detect tablets based on user agent
    utag_data.device_tablet = ((function(a){if(/ipad|android.+\d safari|tablet/i.test(a))return true})(navigator.userAgent||navigator.vendor||window.opera))?'true':'false';
  • !!! IMPORTANT: Set the scope to ‘Pre Loader’ !!!

Step 3: Create your load rules

Detect Mobile device in Tealium Step 3
Build your load rules:
  • is Mobile true: device_mobile / equals / true (if you want to trigger things on mobile devices)
  • is Mobile false: device_mobile / equals / false (if you do NOT want to trigger things on mobile devices)
  • is Tablet true: device_tablet / equals / true (if you want to trigger things on tablet devices)
  • is Tablet false: device_tablet / equals / false (if you do NOT want to trigger things on tablet devices)

Step 4: Use your load rules / Save / Test / Publish / Have a drink (This is important)

How we can help

So that’s how you can take control of what your visitors see, depending on their device type. And there’s so much you can do with it! I hope this article was helpful. Feel free to reach out to us for any queries that you might have. Also, if you don’t have time to learn and apply the magic of analytics, that’s what we are here for! We are a crazy team of Google and Adobe Certified Analytics Experts who eat, breathe, sleep and dream Analytics. And we’ve made it our purpose and passion to electrify your business’s potential through Analytics.

Contact us here.

Found it informative? Leave a comment! You can also give us a thumbs up by sharing it with your community. Also did you know that you can light up our day by subscribing to our blog? Subscribe here –


Implementing Facebook Pixel via Google Tag Manager

*seo stuff – Implementing Facebook Pixel via Google Tag Manager * 😀

The Importance of Facebook Pixel

Imagine this offline scenario – You own an apparel store which sells clothing for men and women. Every day, you meet and greet your customers and you even know some of them well. But one morning, instead of your regular human visitors, some black figures visit your store to shop. And now that happens everyday, all day long. No human customers anymore. Just those black figures, which you can’t even distinguish in terms of appearance, gender, age, or any physical feature, because they are all alike, all black.  Lol wtf right?

All of them are having fun at your store, loving your products, trying stuff, shopping and then leaving. At any day, you won’t even know if they are new ones or if they had visited earlier.

How then, would you know the characteristics of your customers? How would you know if more number of women are shopping, or more men? Or if most of your customers are young or middle aged?

Maybe you would know which of your products sell the most, but you would have no clue about who is buying them. You would have no clue about the type of audience that you must target in order to get more sales. Can you imagine?

Okay don’t cringe. That’s not gonna happen if you own a brick-and-mortar store. But do you own a website? If yes, there’s no way you can ‘see’ your customers while they’re exploring or shopping at your online store. It’s just like knowing that a black figure has entered your website. And it’s only legit if this thought makes you cringe. But since I’m writing about Facebook Pixel, it surely is the superhero-coming-to-the-rescue here. It gives you digital eyes, just like RedBull gives you wings. And that’s just one of the many things it does for you.

Sure we have Google Analytics and other analytics tools which collect information about visitors and you can do a doubleclick cookie integration in your GA account, but dude! Facebook knows EVERYTHING about everyone. This Mr-know-it-all knows your cousin’s wedding anniversary, and your mother’s birthday.

And in order to put this information to use, Facebook created Facebook Pixel. Facebook Pixel is a small code that we place on our website, and its function is to collect data for a myriad of goals that we can accomplish later.

The most important thing a pixel does is, umm, everything it does seems important! But okay, I’d like to describe two of the most important ones. One, it can be used for Remarketing on Facebook. You must have noticed that Facebook shows you adverts about stuff that you already have been looking for. For example, if you recently explored some online stores for track pants, be sure to see some relevant suggestions on Facebook! That’s remarketing. Facebook records your browsing activity and shows you ads based on your interests. This is accomplished by advertisers with the help of Facebook Pixel.

And remarketing has statistically been proven to improve conversion rates. Moreover, you can also use this base of past visitor to promote to them new stuff as well. This will greatly help you in refining your campaigns for optimum returns on your marketing spends.

Two, it allows you to build a lookalike audience of people who have similar interests and demographics to people who are already showing interest in your website. This means that you can target people who are similar to your current customers. It’s a great way to not only reach new people, but new potential customers.

Facebook Pixel also helps to track conversions and run effective ads. Again, so important!

Having made it clear that you must install a Facebook pixel to your website right away, let’s see how you can do it.

*seo stuff – Implementing Facebook Pixel via Google Tag Manager * 😀

Implementing Facebook Pixel via Google Tag Manager

To install a Facebook Pixel into your website through Google Tag Manager, you need access to a Facebook Business Manager account and a Google Tag Manager account. The following steps will take you through the installation process.

  • Log into your Facebook account and switch to Business Manager.
  • Open the Business Manager Menu and click on Pixels.

  • Give a name to your pixel and create it.

  • Having created the pixel successfully, you  now need to install it to your website, for which we’re using Google Tag Manager here.
  • Click on Setup and you will now be able to see a pop-up like this. Choose the first option.

  • Select Google Tag Manager from the list of tools.

  • Another pop-up will present you with the following options.

  • You can go with either of them, depending upon your convenience. If you would like to install the code manually, you’d have to copy it, create a Custom HTML tag in your Google Tag Manager Dashboard, and then paste the code under the tag’s HTML. If you go with the Quick Install, a tag gets automatically created in your GTM account.
  • Choosing Quick Install presents you with further steps which are quick, easy and smooth. Finally, publish.

  • Now log into your Google Tag Manager account to verify that the tag has been created. You’ll be able to see a Base Pixel Code tag under the Tags tab.

That’s all! The pixel starts working in a few minutes. You can now start receiving insights and tracking the performance of your website, right at your Facebook Business Manager account.

*seo stuff – Implementing Facebook Pixel via Google Tag Manager * 😀

Other Benefits

With GTM, you can not only implement this pixel but also “conveniently” pass custom data into facebook. Data like which products are users viewing, at which depth they are exiting the checkout, are they submitting any forms? etc etc

All this custom information will help you in further refining the definition of your target segment. With a refined audience segment you can expect optimum returns per penny spent. At the end of the day, its all about increasing the profits and reducing the costs and such consistent incremental optimizations can give you a huge advantage in your market.

Let me know your thoughts in the comments below.

*seo stuff – Implementing Facebook Pixel via Google Tag Manager * 😀

How we can help

Without any technical intricacies, you can install a Facebook Pixel and start collecting valuable visitor data on Facebook as well as Google Tag Manager. The next step would be to make the most out of your pixel, by deploying it for the very effective marketing techniques like Remarketing, lookalike audience and conversion tracking. And that’s what we are here for. We are a crazy team of Google and Adobe Certified Analytics Experts who eat, breathe, sleep and dream Analytics. And we’ve made it our purpose and passion to electrify your business’s potential through Analytics.

Contact us here.

Found it informative? Leave a comment! You can also give us a thumbs up by sharing it with your community. Also did you know that you can light up our day by subscribing to our blog? Subscribe here –


*seo stuff – Implementing Facebook Pixel via Google Tag Manager * 😀

What is Data Layer?

[mashshare]

What is data layer?

Data layer is a JavaScript array (a data structure containing multiple elements) of a single object which contains data in key-value pairs. Eeeeeewwwwww. I feel criminal to sound so complex and technical! I take it back and we start afresh. Now before discussing what a data layer is, let’s see how and why it came into existence.

When it comes to running a website or an app, we all need some information about our users to enhance their experience at our website (or app). For this purpose, we use analytics and tag management tools, which collect this information in the form of actionable data.

While using a Tag Manager, this data is obtained directly from the HTML of a website, with the help of JavaScript. For example, when a user visits a website, HTML records his activities such as page views, button clicks, log in/out, purchases, downloads, etc. Do you realize that in order to collect data at so many points of action, we need to write separate JavaScript snippets for each?

That’s not the only bugbear here. What if the HTML of our website undergoes some changes? For example, let’s say the button ID of a button accidentally got altered by the developer. Lol what a stupid developer! But shit happens and to err is only human.

Now, thanks to this developer, we have a brand new button ID and our JavaScript snippet has no idea about it. What happens? It stops working! We’ll now have to make appropriate changes in our JavaScript to keep obtaining data from that button.

So, Problem Number 1 – Multiple JavaScript codes. Problem Number 2 – a constant sync must be maintained between the HTML and the JavaScript that accesses it.

The solution? Data Layer, duh.

To solve the problems mentioned above, some cool technical creatures came up with the concept of a Data Layer. It is a layer between the HTML and the Tag Management System (or any data collecting tool) which collects data from the HTML, and passes it to the Tag Management System or other data collection tools. It holds all the data we want to pass from our website to our linked applications.

In technical terms, HTML is called the Experience Layer and the Tag Manager resides at the Application Layer. So the flow of data is from Experience Layer to Data Layer to Application Layer.

To be honest, I also feel criminal to make a very important tool like data layer look like it’s nothing. Or am I cool? Cool or criminal? Maybe I’m angelic to help you understand it easily. O:)

Let’s keep it simple and see what data layer looks like in the real world. In implementation, data layer is a set of codes. Codes that hold data required by applications such as Tag Managers or Analytics tools. Requirements specified by the Analytics/Marketing team are converted into a JavaScript snippet by the developer, and this snippet is inserted into the website.

And what I took back in the start of this article, is what a data layer actually is. It is a JavaScript array of a single object which contains data in key-value pairs.

An array is a data structure containing multiple elements. To define, for example, an array named A, we follow either of the following syntaxes –

var A = new Array();
or
A = [];

Here ‘A’ is an empty array. So the JavaScript snippet to create an empty data layer would be –

datalayer = [];

So our data layer has been created. Here ‘datalayer’ is just a name. You can give any name to your data layer, even though there are some default names specified by different Tag Management Systems, and it’s recommended that you go with the defaults. Google Tag manager calls it dataLayer, Tagman uses tm_params, Tealium calls it utag_data and Qubit calls it universal_variable.

Inside the data layer, is a single object. And since we include objects within a pair of curly braces, this is how the structure of a data layer looks –

datalayer = [
{
}
];

Everything included within these curly braces forms a single object. Here is an example structure of a data layer.

How does a Data Layer help

I – Specific and refined data

A data layer only holds the data needed and specified by a business or an application. For this reason, it is also considered to be a refined list of business requirements.

II – Data layer speeds up the process of deployment of tags.

Now since data layer creates a direct passageway for data to flow from the website to the Tag Management System, without running multiple JavaScript snippets, the whole process becomes faster and smoother.

III – Data layer helps you get the most out of a Tag Management System

The Data layer is one of the key concepts in the world of Tag Managers. The tools work best when deployed using the data layer, as it ensures maximum flexibility, portability, and ease of implementation.

IV- Data layer allows the Analytics and Digital Marketing team to conveniently make changes on the website.

Since the mess of numerous JavaScript codes gets cleared, the constant dependency on developers for making changes to data tracking codes and resolving issues is greatly reduced. It also relieves the web developers equally, leaving them to get on with implementing new features and fixing bugs.

Best Practices in Data Layer’s Implementation

  • Business Objective Document

Writing down the requirements and objectives of an organisation is the first step in creating a data layer. This practice gives a vision and a clearer understanding of what information the data layer must collect and how.

  • Multiple Data Layers

Each team within an organisation has its own set of goals to achieve, which collectively help the organisation to achieve its basic goal. Since every goal requires distinct data, distinct data layers must be created. Each data layer will collect data that is specific to a particular goal. Hence, we recommend separate data layers for Analytics, Marketing and other tools.

  • Consistent Naming

Keep the names of your data layer and variables simple and readable. One way to do this is by using lowercase and underscores instead of camel casing. For example, use ‘page_id’ instead of ‘pageID’. The names must also be relevant and descriptive.

Example Data Layer

Suppose an online store comprising thousands of women’s bags, needs to know their most popular products. So the goal here – To find out the type of products being loved the most.

The ‘type’ here could be dark colored handbags under 1499 bucks, or luxury wallets that cost over 2999 bucks. Hence, our data layer must record some crucial attributes such as product category, price range, physical attributes, along with the product name of course.

A data layer for the same (holding some values) must look like –

datalayer = [
{
'product_name' : 'Black Fringed Wallet'
'product_category' : 'Wallets'
'color' : 'Black'
'price' : 899
}
];

Notice that the goal is fully met by making sure that only the data specific to the company’s requirements is collected. Insights formed on the basis of this data will help the company understand the preferences of its customers. If most of the visitors viewed bags which are dark colored backpacks priced between 1399 and 1899 bucks, the company can come to conclusion on what’s trending the most.

Also notice that the names of variables are simple and fully understandable.

Similarly, another data layer for the same company could track purchase-related data, in order to know which type of products are bought the most. Multiple data layers can be (and must be) created to achieve the various goals of the company.

How we can help

To sum up, data layer is a technical thing. And it is the key to get the most out of a Tag Management System. Even though you don’t need a lot of JavaScript knowledge to deploy tag management tools like Google Tag Manager, you definitely need it (or a JavaScript expert) to write a data layer. And that’s what we are here for. We are a crazy team of Google and Adobe Certified Analytics Experts who eat, breathe, sleep and dream Analytics. And we’ve made it our purpose and passion to electrify your business’s potential through Analytics.

Contact us here.

Found it informative? Leave a comment! You can also give us a thumbs up by sharing it with your community. Also did you know that you can light up our day by subscribing to our blog? Subscribe here –


What is Google Tag Manager?

What is Google Tag Manager?

Google Tag Manager is a problem-solver. It’s a lifeguard that has come to rescue anyone who is drowning in the ocean of tags (JavaScript snippets that send information to third party). Google Tag Manager, or GTM, is a super useful tool that simplifies the task of managing tags. Simplifies? I think GTM has made it the simplest ever!

With Google Tag Manager, you no longer need to hard-code JavaScript into each page of your website for collecting information about the behaviour of your visitors. Instead, you can now use Google Tag Manager’s interface to add, update or manage tags – mostly without writing JavaScript. You no longer need to chase your developer (who somehow happens to be the busiest person on the planet) for the task. With GTM in your hands, it’s all in your hands. Feeling powerful? Happy realization!

Apart from making you realize the power you now have, we are here to help you put GTM to work! Go ahead, click here to make a wish. #GenieVibes

Why you need Google Tag Manager

You need to upgrade

You need GTM because to stay ahead of the league, you need to say good-bye to the old practice. You need to upgrade. Without GTM, for performing tasks as simple as tracking the number of button clicks, to as complex as tracking scroll depth, or even making the tiniest changes to your already existing snippets, you had no choice but to seek a technically blessed creature.

GTM greatly reduces your dependency on a developer

GTM provides a handy, step-by-step interface which allows you to create and manage all your tags at one place. Without actually coding a snippet, you just follow some simple steps to create a tag and specify when and where it gets triggered. GTM handles the rest!

GTM reduces your expenses

A developer takes hours to write codes for the various tasks you want your website to perform. A GTM expert on the other hand, makes it possible in a much lesser time, which means you pay less for the same work.

GTM boosts your system’s speed and efficiency

To make advancements, you come up with changes to your existing system. You take decisions. And then? The most complex of all – Implementation. Those time-consuming implementations that take multiple steps to go live, can be centrally handled with Google Tag Manager.

With features such as debug, preview, security, integration with Google Analytics and many other Google products, there’s no end to what you can do – all at one place, efficiently.

Perks of Google Tag Manager

The list is huge, but to name a few,

  • Debug

After having created a tag, you can use this built-in error checking tool to make sure your tag works fine and smooth.

  • Preview

The preview mode gives the user a preview of the real-time performance and accuracy of a tag.

  • Security

You can set up a two-factor authentication that requires both your normal password and a numeric code that you receive over an sms, voice call, or mobile app. You can also manage permissions at different levels of the account.

  • DIY

You can Do It Yourself. By just inserting a container tag to your website, which is a one-time task, you can start creating tags, debug and preview them so as to have the whole idea of and control over what you’re doing!

  • Google Tag Manager +  Google Analytics

Even though both the tools can work independent of each other, when you team them up, they rock! Google Tag Manager simplifies the implementation of services provided by Google Analytics.

  • It’s free of cost

The tool, yes.

How we can help

Just in case it’s difficult for you to take out time and learn how to deploy Google Tag Manager and Google Analytics, we’re here! We are a crazy team of Google and Adobe Certified Analytics Experts who eat, breathe, sleep and dream Analytics. And we’ve made it our purpose and passion to electrify your business’s potential through Analytics.

Contact us here.

Found it informative? Leave a comment! You can also give us a thumbs up by sharing it with your community. Also did you know that you can light up our day by subscribing to our blog? Subscribe here –


Analytics with React-Redux SPAs and Google Tag Manager

React-Redux has become a hugely popular web development combo, but there aren’t too many guides out there on how to sprinkle in analytics. Most implementations require some modification to your app’s code, often with analytics specific business logic.

The most common pattern seems to be with redux middleware, which definitely is a step in the right direction. The redux-analytics package encompasses this pattern nicely. Every redux action becomes a place where insights can be extracted, simply by appending some analytics information to the action metadata.

const action = {
  type: 'MY_ACTION',
  meta: {
    analytics: {
      type: 'my-analytics-event',
      payload: {
        some: 'data',
        more: 'stuff'
      }
    }
  }
};

This is a great start, and I had many of these analytics payloads throughout the codebase for a while and it worked great. The problem was that whenever someone wanted to change pretty much anything, it required a redeployment. Plus you’ll often have less tech savvy users wanting to add their own insights.

We already had an integration with Google Tag Manager (gtm.js), so I was a little biased towards this implementation. This goes two-fold for other departments who were already familiar with gtm.js, which is currently reaping it’s benefits with less development overhead when adding analytics insights.

Anyway lets get started on a basic Redux integration with gtm.js and my personal analytics platform of choice — Mixpanel.


Getting Started

If you’re not already familiar with gtm.js, you can simply inject it’s javascript snippet into your app then get going. All of the configuration is driven through the gtm web UI, which has come a long way in the years.

Now on the app side, the Redux middleware approach is still the way to go here:

const analytics = () => next => action => {
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: action.type,
    payload: action.payload
  });
  return next(action);
};
// Add in the analytics middleware
let store = createStore(
  todoApp,
  applyMiddleware(
    analytics,
    thunk,
  )
);

Instead of dispatching analytics events from the application, it’s now firing everything to the gtm.js dataLayer. Each dataLayer event needs an event attribute to denote the type of event, but other than that you can structure your data format in any way that suits your application.

Now that’s pretty much it for the initial setup, assuming you already have the gtm.js snippet embedded in your application somewhere. Everything else can now be driven by the Tag Manager UI. I’ve started storing tags/triggers/variables in their own respective folders, but these can be changed at any time.


Creating the first event

To get started, lets setup the beloved page load events that management always seems to want. A typical React SPA usually has some form of client-side routing, so there needs to be a method to track the initial page view (landing) and route transitions. To capture both of these, 2 triggers are required.

Create the trigger in some folder of your choice

First, create the tag for the page load. I used the window loaded trigger here, and named it Global.pageLoad for use later.

Create the first pageLoad event

Next, create the history change event, which will capture route transitions from your SPA router (e.g. react-router). This is similar to the Window Loadedevent above, but the History Change trigger can be selected instead.

Create a new tag Page View that triggers on either of these. I’ll be using Mixpanel throughout, but the same can apply to Google Analytics or your platform of choice.


Tracking authentication

The place where Mixpanel shines is tracking arbitrary events, with arbitrary (and sometimes changing) event attributes. This is the perfect behavior for a dynamic web application, and especially for the range of redux events that are fired.

In many applications, there’ll be some kind of authentication event fired. In my current app it’s structured as follows:

const authenticateAction = {
  type: 'AUTHENTICATE',
  payload: {
    user,
    token
  }
}

1. Create the trigger

This event is now available to use in Tag Manager as a custom event. Create a new trigger referencing this authenticate action:

The Event name should match the string type field in the redux action

2. Access the data

To access variables within your redux events, you need to create a Tag Manager variable for each primitive you want to access. Unfortunately there is no object dot notation access (yet).

Access the user id variable within the redux action

3. Send the analytics event

The complete authentication tag

Now that we have the trigger, and the data, we can send an analytics event. For user identity, this often varies per analytics-platform.

Create a new tag that uses the previous AUTHENTICATE event, along with the User.id variable. Inside a Custom HTML tag, the variable can be accessed using the {{VARIABLE}} notation.

Conclusion

That’s all there is to it to get started, now try login to your application and you’ll see the identification action get triggered and sent to your analytics. Now your analytics platform can grow as your application grows, without littering the code base with metadata tags.

It’s just as easy to add other actions and variables, and create triggers that fire conditionally based on the value of a variable — all within Tag Manager.

 Hope you liked this post.
You may subscribe to us for more good content for Free.
Best,

Non-Interaction Events in Google Analytics

So what are Non-Interaction Events in Google Analytics?

You already know about event tracking in Google Analytics and using it for everything from downloads to video plays. Maybe you’re using jQuery or Google Tag Manager to capture events.

One thing to note about events is that, by default, events affect the bounce rate. That is, if a user lands on a page and an event is triggered, they are not a bounce (even if they don’t view any subsequent pages). In many cases, that’s what you want: after all, if someone engages with the page in some way, you probably don’t want to count them as a bounce any more.

However, you have control over whether those events affect bounce rate. There’s a parameter you can send with the event data to decide this called the “non-interaction” parameter. In a case where a video auto-plays when someone lands on the page, for example, we might want to set the non-interaction parameter so that the bounce rate of that page isn’t zero.

Flagging Non-Interaction Events

The code for a non-interaction event is just a single parameter you set along with the event data.

For Classic GA:

For Universal Analytics:

Using Google Tag Manager:

Screen Shot 2014-05-05 at 8.14.21 AM

Effect on Metrics

Screen Shot 2014-05-01 at 1.03.19 PMNon-interaction events are mostly referenced in regard to bounce rate, but they actually affect several metrics. Setting the non-interaction parameter has the following effects:

  • Bounce rate and time metrics (session duration and time on page) are no longer affected by the event.
  • The number of total events, unique events, sessions, users, etc. are counted normally.

Give us a shout if you need any help with  Analytics by filling in the form below

Check out our Google Analytics solutions here

Check out our Adobe Analytics solutions here

FireBase Analytics Vs Google Analytics

Why FireBase Analytics ?

Because FireBase Analytics was created exclusively for apps.

There is a reason why a lot of app development companies invest on creating in-house analytical tools rather use vendor solutions.

Most digital analytical tools including Google Analytics were created in a “pre-mobile app” era. A majority still cater primarily to website architectures. Mobile applications differ greatly from websites. Websites are click based.

Other than forms where the text is typed, a click is supposed to change the page being viewed. Events like video view or document download are afterthoughts to the basic page based architecture. Apps, on the other hand, have several elements and types of interactions over one or multiple screens. Also, users can call various action by touching, swiping, pinch-in, pinch-out using multiple fingers in various ways. Users can thus interact with various elements that trigger content without changing the screen they are in.

There are many apps out there whose interface is just a single screen. The traditional page of websites does not exist. Also, Firebase analytics has solved a big question Google Analytics is still struggling How to uniquely identify a user who may access the page from multiple devices/browsers/time gaps? For mobile apps, there is no need to force yourself to the website language of Google Analytics.

Your analytics tool has to adapt to your business reality and not the other way around. Pure play app creators need a tool that understands users and events. Firebase Analytics is that solution.

Free unlimited event reporting in Firebase Analytics unlike Google Analytics

Another consequence of the page and session based tools like Google Analytics is that events are an afterthought for them. Thus there are limits to which one can go while analyzing events. Even paid solutions like Google Analytics premium have a limit on how many events you can report and analyze. Firebase, however, provides you with unlimited reporting for up to 500 distinct events.

Did we mention that Firebase is also free?

Funnel analysis makes much more sense in Firebase Analytics than in Google Analytics

The traditional page flow analysis involves analyzing sequence of pages visited in a session prior to the desired outcome. This is not useful. This is because visitors don’t “follow” the path that we want them to follow.

The correct way to analyze user behavior flow is to identify the critical actions taken at every step of the conversion process. Since Firebase is based on events and not on screen views, it allows you to create funnels based on events which give much more value than the page-view based funnels Google Analytics has.

You can connect Firebase Analytics to Google Analytics

Imagine tomorrow your organization decides to use websites in addition to the apps. Alternatively, let us say you still have stakeholders who understand only the language of Google Analytics. Firebase has a tight integration with Google Analytics. Connect your Firebase data to Google Analytics and see your Firebase analytics reports without leaving the Google Analytics user interface.

Unlike Google Analytics, Firebase Analytics is much more than an app analytics tool

Firstly, Firebase is a mobile and web application platform. Its original product was a real time database. Along with the famous Firebase Analytics, it also has services and infrastructure designed to help developers build high-quality apps.

Firebase features can be mix-and-matched by developers to fit their needs. After Firebase was acquired by Google in October 2014, it has expanded to become a full suite for app development with many Google products like Admob also integrated into it. You can take a look at what Firebase has apart from Analytics here. Firebase as a backend service is one of the fast growing businesses in the Android market.

Unlike Google Analytics, Audiences can be used through the rest of the Firebase Analytics platform

Firebase audiences are like segments in Google Analytics. Additionally, Firebase enables audience-specific push notifications and app configuration changes to be sent out without having to collate that information separately. You can identify custom audiences in the Firebase console based on device data, custom events, or user properties. These audiences can be used with any of the other Firebase features mentioned above.

By investing in Firebase, you will be investing in many more tools from Google that helps in app development and monetization. With the purchase of Fabricdeveloper platform from Twitter last month, Firebase has again come to the spotlight. Fabric’s reach of 580,000 developers will grow the user base of Firebase. If your digital strategy is app-driven, Firebase is the right analytics tool for you.

You might like this video on Firebase :

Give us a shout if you need any help with mobile App Analytics by filling in the form below

Check out our Google Analytics solutions here

Check out our Adobe Analytics solutions here

Bucket Testing

What Is Bucket Testing?

Bucket testing (sometimes referred to as A/B testing or split testing) is a term used to describe the method testing two versions of a website against one another to see which one performs better on specified key metrics (such as clicks, downloads or purchases).

There are at least two variations in each test, a Variation A and a Variation B. Metrics from each page variation are measured and visitors are randomly placed into respective ‘buckets’ where the data can be recorded and analyzed to determine which performs best.

Companies that market and sell products or services online rely on bucket testing to help them maximize revenue by optimizing their websites and landing pages for conversions.

How It Works: An Example

Let’s look at a hypothetical example. Each bucket test begins with a hypothesis that a certain variation on a landing page will perform better than the control. Say you have an existing landing page for a free nutrition eBook, Eat Raw Foods and Live Longer.

The button on the bottom of your landing page’s sign-up form says ‘Submit,’ but your hypothesis is that changing the text to ‘Get Your Free Copy’ will result in more form conversions. The existing page with the ‘Submit’ button is the control, or Variation A. The page with ‘Get Your Free Copy’ on the button is Variation B. The key metric you will measure is the percentage of visitors who fill out the form, or a form completion.

Because you have an ad campaign driving several thousand visitors a day to your landing page, it only takes a few days to get the results from your bucket test. It turns out that ‘Get Your Free Copy’ has a significantly higher click rate than ‘Submit,’ but the form completion rate is basically the same. Since the form completion rate is the key metric, you decide to try something different.

Bucket Tests & Conversion Optimization

Bucket testing plays a big role in conversion rate optimization. Running a bucket test allows you to test any hypothesis that can improve a page’s conversions. You can continue to try higher-converting button text for Eat Raw Foods and Live Longer or you can go on to test other hypotheses, such as bolder headline copy, more colorful imagery or arrows pointing to the sign-up button that will get more people to convert.

Companies spend millions of dollars to drive traffic to landing pages and websites that promote their product or service. With simple variations to page copy, imagery, and layouts, you can conduct a series of bucket tests to gather data and to iterate towards your highest-performing version of the page. You simply create variations of the page, changing one element at a time and measuring key metrics, then collect the results until reaching statistically significant results for each experiment.

Bucket testing can make a significant impact on conversions per page, resulting in revenue increases on your highest-trafficked pages.

Bucket testing can also help to eliminate subjective opinions as deciding factors in a page’s design or layout. The author of Eat Raw Foods and Live Longer may think that her photo will drive more customer demand – or she may insist on a rainbow palette of colors.

With bucket testing, there is no need for debate on what design or page elements will work best to convert a customer. The quantitative data will speak for itself, and drive the decision for you.

Tests should be prioritized to run on your most highly trafficked pages, since you may need hundreds or thousands of visitors to each variation to gather statistically significant data. The more traffic a page receives, the quicker you will be able to declare a winner.

Common Page Elements To Test:

  • Headlines and sub-headlines: varying the length, size, font and specific word combinations
  • Images: varying the number of images, placement, type of imagery (photography vs. illustration) and subject matter of imagery
  • Text: varying the number of words, style, font, size and placement
  • Call-to-action (CTA) buttons: varying common ones such as ‘Buy Now,’ ‘Sign Up,’ ‘Submit,’ ‘Get Started,’ or ‘Subscribe’ and varying sizes, colors and page placement
  • Logos of customers or third party sites: build credibility and convey trustworthiness (could include Better Business Bureau, TRUSTe or VeriSign logos as well as customer logos)

Give us a shout if you need any help with A/B testing by filling in the form below

Check out our Google Analytics solutions here

Check out our Adobe Analytics solutions here