Iframe YouTube Video Tracking with UPVUE PLAYER using Google Tag Manager

Standard

Automatically Track IFrame YouTube videos with UPVUE PLAYER (Captions and transcripts include hearing impaired and second-language viewers) using Google Tag Manager

Iframe YouTube videos event tracking with UPVUE PLAYER (Captions and transcripts include hearing impaired and second-language viewers) using Google Tag Manager.

If you are looking youtube video tracking using Google Tag Manager Like Iframe YouTube Video,  Pop Up youtube video tracking and Track IFrame YouTube videos with UPVUE PLAYER.

Step 1. Create the YouTube is Present Macro with UPVUE PLAYER using Google Tag Manager 

Macro Name: YouTube is Present for UPVUE PLAYER using Google Tag Manager
Macro Type: Custom Javascript
Custom Javascript: See below in Screen

Tracking YouTube Presence using Google Tag Manager

Tracking YouTube Presence using Google Tag Manager

Step 2. Track IFrame YouTube videos with UPVUE PLAYER using Google Tag Manager 

Tag Name: YouTube Listener to IFrame YouTube videos with UPVUE PLAYER Google Tag Manager
Tag Type: Custom HTML Tag

Note:  You need to modify below HTML Code according to Youtube Video using Like Iframe YouTube Video,  Pop Up youtube video tracking and Track IFrame YouTube videos with UPVUE PLAYER.

<script type=”text/javascript”>
for (var e = document.getElementsByTagName(“iframe”), x = e.length; x–;)
if (/youtube.com\/embed/.test(e[x].src))
if(e[x].src.indexOf(‘enablejsapi=’) === -1)
e[x].src += (e[x].src.indexOf(‘?’) ===-1 ? ‘?’:’&’) + ‘enablejsapi=1’;

var gtmYTListeners = [];
function onYouTubeIframeAPIReady() {
for (var e = document.getElementsByTagName(“iframe”), x = e.length; x–;) {
if (/youtube.com\/embed/.test(e[x].src)) {
gtmYTListeners.push(new YT.Player(e[x], {
events: {
onStateChange: onPlayerStateChange,
onError: onPlayerError
}
}));
YT.gtmLastAction = “p”;
}
}
}
function onPlayerStateChange(e) {
e[“data”] == YT.PlayerState.PLAYING && setTimeout(onPlayerPercent, 1000, e[“target”]);
var video_data = e.target[“getVideoData”](),
label = ‘ ‘+video_data.title;
if (e[“data”] == YT.PlayerState.PLAYING && YT.gtmLastAction == “p”) {
dataLayer.push({
event: “youtube”,
action: “play”,
label: label
});
YT.gtmLastAction = “”;
}
if (e[“data”] == YT.PlayerState.PAUSED) {
dataLayer.push({
event: “youtube”,
action: “pause”,
label: label
});
YT.gtmLastAction = “p”;
}
}

function onPlayerError(e) {
dataLayer.push({
event: “error”,
action: “GTM”,
label: “youtube:” + e
})
}

// report the % played if it matches 0%, 25%, 50%, 75% or completed
function onPlayerPercent(e) {
if (e[“getPlayerState”]() == YT.PlayerState.PLAYING) {
var t = e[“getDuration”]() – e[“getCurrentTime”]() <= 1.5 ? 1 : (Math.floor(e[“getCurrentTime”]() / e[“getDuration”]() * 4) / 4).toFixed(2); if (!e[“lastP”] || t > e[“lastP”]) {
var video_data = e[“getVideoData”](),
label = ‘ ‘+video_data.title;
e[“lastP”] = t;
dataLayer.push({
event: “youtube”,
action: t * 100 + “%”,
label: label
})
}
e[“lastP”] != 1 && setTimeout(onPlayerPercent, 1000, e);
}
}

window.onbeforeunload = function (e) {
var e = e || window.event;
// For IE and Firefox prior to version 4
if(e)
e.returnValue = ‘na’;
// For Safari
return ‘na’;
};
window.onbeforeunload = trackYTUnload;

function trackYTUnload() {
for (var i = 0; i < gtmYTplayers.length; i++)
if (gtmYTlisteners[i].getPlayerState() === 1) { // playing
var video_data = gtmYTlisteners[i][‘getVideoData’](),
label = ‘ ‘+video_data.title;
dataLayer.push({
event: ‘youtube’,
action: ‘exit’,
label: label
});
}
}
// load the Youtube JS api and get going
var j = document.createElement(“script”),
f = document.getElementsByTagName(“script”)[0];
j.src = “//www.youtube.com/iframe_api”;
j.async = true;
f.parentNode.insertBefore(j, f);
</script>

Firing Rules 

Rule Name: YouTube present
Conditions:
{Event name equals gtm.dom
{{YouTube is Present}} equals true

2016-06-10_0337d

Step 3. Create Macros for Event Action, Event Category, and Event Label Iframe Youtube Video  with UPVUE PLAYER using Google Tag Manager 

A: Event Action Macro using Iframe Youtube Video with UPVUE PLAYER using Google Tag Manager

Macro Name: dataLayer action
Macro Type: Data Layer Variable
Data Layer Variable Name: eventAction
Data Layer Version: Version 2
Default Value: (blank)

2016-06-12_1535

B: Event Category Macro using Iframe Youtube Video with UPVUE PLAYER using Google Tag Manager

Macro Name: dataLayer category
Macro Type: Data Layer Variable
Data Layer Variable Name: eventCategory
Data Layer Version: Version 2
Default Value: (blank)

Event Category Macro using Iframe Youtube Video with UPVUE PLAYER using Google Tag Manager

Event Category Macro using Iframe Youtube Video with UPVUE PLAYER using Google Tag Manager

C: Event Label Macro Iframe Youtube Video with UPVUE PLAYER using Google Tag Manager

Macro Name: dataLayer label
Macro Type: Data Layer Variable
Data Layer Variable Name: eventLabel
Data Layer Version: Version 2
Default Value: (blank)

 Event Label Macro Iframe Youtube Video with UPVUE PLAYER using Google Tag Manager

Event Label Macro Iframe Youtube Video with UPVUE PLAYER using Google Tag Manager

Step 4. Create UA Youtube Event – UA Tag & Check for YouTube Event Rule Iframe Youtube Video  with UPVUE PLAYER using Google Tag Manager 

Tag Name: UA YouTube Video Tracking – Video Page
Tag Type: Universal Analytics
Tracking ID: (your Google Analytics ID)
Track Type: Event
Event Tracking Parameters:
Category: {{dataLayer category}}
Action: {{dataLayer label}}
Label: {{dataLayer action}}

 YouTube Video Pop Tracking

Tag Setup for YouTube Video Pop Tracking

Firing Rules

Rule Name: YouTube event

Fire On

Event name equals youtube

 

 

Custom Even Tracking for Youbube Video

Custom Even Tracking for Youbube Video

Step 5. Check iframe Youtube with UPVUE PLAYER using Google Tag Manage into Google Analytics Real-Time Report

Real Time YouTube Video Tracking

Real Time YouTube Video Tracking

Warning:if you do n’t know about javascript or do n’t have developing knowledge then do n’t try to implement on iframe Youtube with UPVUE PLAYER using Google Tag Manager that can broke your site, Cart and other functionality 

Disclaimer: Google tag manager belongs to Google property 

For Contact: mappchero@gmail.com

I am avaible for Hire on Freelancer: Freelancer.com

I am avaible for Hire on Upwork: Upwork.com

I am avaible for Hire on Peopleperhour: Peopleperhour.com

I am avaible for Hire on Guru: Guru.com

pop up and Lightbox youtube video using Google Tag Manager

Standard

Pop up Light box YouTube Video Tracking via Google Tag Manager (Pop up)

Pop up Surface Out and Light box Surface out YouTube video tracking with Google Tag Manager and  Google Analytic

Are you looking how to analyze the reach of different types of interaction with Pop Up out YouTube Video on the web pages.

When you have a site with embedded / Pop up lightbox YouTube Videos tracking you could track how your visitors have interaction with YouTube Video using Google Tag Manager and You can see result in Google Analytic.

This can provide you with an understanding of the way people have interacted along with your Pop up lightbox /iframe/Any Type of YouTube videos using Google Tag Mag Manager. like

  • Play events
  • Pause events
  • Watch to End events
  • 10, 25, 50, 75, & 90% Completion events

Step 1. Create the YouTube is Present Macro with Pop up Light box YouTube Video Tracking using Google Tag Manager 

Macro Name: YouTube is Present for Pop up Light box YouTube Video Tracking using Google Tag Manager
Macro Type: Custom Javascript
Custom Javascript: See below in Screen

Tracking Pop up Light box YouTube Video Tracking Presence using Google Tag Manager

Tracking Pop up Light box YouTube Video Tracking Presence using Google Tag Manager

Step 2. Track Pop up Light box YouTube Video Tracking using Google Tag Manager 

Tag Name: YouTube Listener to Pop up Light box YouTube Video Tracking using Google Tag Manager
Tag Type: Custom HTML Tag

Note:  You need to modify below HTML Code according to YouTube Video using Jquery for Pop up Light box YouTube Video Tracking  using Google Tag Manager similar like below

<script>
$(function() {
$(“.play”).jqueryVideoLightning({
});
});
</script>

2016-06-12_1511

Firing Rules 

Rule Name: YouTube present
Conditions:
{Event name equals gtm.dom
{{YouTube is Present}} equals true

YouTube Video Tracking using Google Tag Manager

Pop up Light box YouTube Video Tracking using Google Tag Manager

Step 3. Create Macros for Event Action, Event Category, and Event Label Pop up Light box YouTube Video Tracking using Google Tag Manager

A: Event Action Macro using Pop up Light box YouTube Video Tracking using Google Tag Manager

Macro Name: dataLayer action
Macro Type: Data Layer Variable
Data Layer Variable Name: eventAction
Data Layer Version: Version 2
Default Value: (blank)

Pop up Light box YouTube Video Tracking

Pop up Light box YouTube Video Tracking using Google Tag Manager

B: Event Category Macro using Pop up Light box YouTube Video Tracking using Google Tag Manager

Macro Name: dataLayer category
Macro Type: Data Layer Variable
Data Layer Variable Name: eventCategory
Data Layer Version: Version 2
Default Value: (blank)

Pop up Light box YouTube Video

Pop up Light box YouTube Video Tracking using Google Tag Manager

C: Event Label Macro using Pop up Light box YouTube Video Tracking using Google Tag Manager

Macro Name: dataLayer label
Macro Type: Data Layer Variable
Data Layer Variable Name: eventLabel
Data Layer Version: Version 2
Default Value: (blank)

Light box YouTube Video Tracking using Google Tag Manager

Pop up Light box YouTube Video Tracking using Google Tag Manager

Step 4. Create UA Youtube Event – UA Tag & Check for YouTube Event Rule Pop up Light box YouTube Video Tracking using Google Tag Manager

Tag Name: UA YouTube Video Tracking – Video Page
Tag Type: Universal Analytics
Tracking ID: (your Google Analytics ID)
Track Type: Event
Event Tracking Parameters:
Category: {{dataLayer category}}
Action: {{dataLayer label}}
Label: {{dataLayer action}}

 YouTube Video Pop Tracking

Tag Setup for Pop up Light box YouTube Video Tracking using Google Tag Manager

Firing Rules

Rule Name: YouTube event

Fire On

Event name equals youtube

Custom Even Tracking for Youbube Video

Warning:if you do n’t know about javascript or do n’t have developing knowledge then do n’t try to implement on Pop up Light box YouTube Video Tracking using Google Tag Manager that can broke your site, Cart and other functionality 

Disclaimer: Google tag manager belongs to Google property 

For Contact: mappchero@gmail.com

I am avaible for Hire on Freelancer: Freelancer.com

I am avaible for Hire on Upwork: Upwork.com

I am avaible for Hire on Peopleperhour: Peopleperhour.com

I am avaible for Hire on Guru: Guru.com

Shopify Ecommerce Setup Using Google Tag Manager

Standard

E-commerce Tracking in Shopify using Google Tag Manager 

Recently so many client ask me to implement E-commerce and Enhanced E-commerce tracking through Google Tag Manager on Shopify, As usual you know very well why e-commerce tracking on the website, You can see in revenue and number sale which product sales, you can see in Google Analytic. There was a certain limitation with Shopify, but recently I have seen Shopify migrate hosted to domain checkout on Shopify.

Integrating E-commerce Track Google Tag Manager with Shopify

Google Tag Manager on Shopify

Google Tag Manager to Shopify

  1. First Install Google Tag Manager on Shopify Ecommerce Tracking without touching Code
How to put Google Tag Manager Code on Shopify put on Theme.liquid file.  
Online Store ——->Themes ——>click on Edit HTML/CSS
Paste this code as high in the <head> of the page as possible:
<!– Google Tag Manager –>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-XXXX’);</script>
<!– End Google Tag Manager –>
Additionally, paste this code immediately after the opening <body> tag:
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-XXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>

Note: Make you will replace GTM Tracking Code with your GTM ID XXXXX

2. Add to DataLayer on Checkout on Order Confirmation for E-commerce tracking on Shopify using Google Tag Manager

Google Tag Manager Shopify Installation

Google Tag Manager Checkout Page Data Layer on Shopify

Written Custom E-commerce Tracking Code using Help of Custom HTML on Google Tag Manager on Shopify without Touching Code/ Data Layer on the website for E-commerce/eCommerce Tracking 

Implementing E-Commerce Tracking on Shopify using Google Tag Manager

Implementing E-Commerce Tracking on Shopify via Google Tag Manager

Warning:if you do n’t know about javascript/ Datalayer/Jquery or do n’t have developing knowledge then do n’t try on Shopify Google Tag Manager Ecommerce Tracking without touching Codea custom javascript without using Any plugin that can broke your site, Cart and other functionality 

Disclaimer: Google tag manager belongs to Google property 

For Contact: mappchero@gmail.com

I am avaible for Hire on Freelancer: Freelancer.com

I am avaible for Hire on Upwork: Upwork.com

I am avaible for Hire on Peopleperhour: Peopleperhour.com

I am avaible for Hire on Guru: Guru.com