I am building a SPA and I would like to have a full control over pageview tracking.
I have an Universal Analytics tag in GTM.
How can I disable initial pageview?
gtag.js has send_page_view option:
gtag('config', 'GA_MEASUREMENT_ID', { 'send_page_view': false });
How can I set something similar for Universal Analytics?
When tracking a SPA application it makes sent not using the default "Page View" trigger for Pageviews.
If you want to have full control over the Page View you should do two things
Implement a custom dataLayer push in your SPA.
Create a custom event trigger in GTM.
Implement a custom dataLayer push in your SPA
For example:
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'custom_pageview',
'additionalData1': 'optional data 1'
})
This push need to happen every time you want a page view tracked.
Create a custom event trigger in GTM
go to Trigger
add custom event trigger
as Event name chose the event you pushed in the dl: custom_pageview
Now use this trigger for your google analytics page view tag.
Related
I am using NextJs with Google Tag Manager, and GA but I am seeing multiple events for a single event.
I am using react-gtm-module to manage the GTM code, then GTM to add the GA tag.
I then use react-tracking to push events to the dataLayer. I've tried using the dataLayer directly and get the same behaviour.
So for example:
<Formik
validationSchema={schema}
onSubmit={(values) => {
trackEvent({
event: "valuation_requested"
});
}}
>
I then have GTM setup to handle this using a trigger for the specific event:
Then I have the tag setup as follows:
However, after going live I see double reporting of events per user.
On the preview for the GTM container I see the following:
However, on the GA container I see the following:
So it looks as though that's the reason for the double events, because the GA container fires multiple events - I'm just not sure why at all.
I'm not sure which tracking codes are needed to get both Google Analytics (GA) and Google Tag Manager (GTM) to work. I'm currently using the following script with GA ->
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxx-x');
</script>
Now that I'm setting up GTM, it is asking me to add the following tracking codes as well ->
<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-xxx');</script>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-xxx"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
Do I need all these snippets? It would be important to be able to both set up event tracking and not lose any previous GA data.
Technically you are migrating from gtag.js to GTM (GTM is a tag manager, and while it can be used to deploy GA by itself it tracks nothing).
If you want to integrate Google Analytics via GTM then the second snippet in your post is the replacement for the first, not an addition. You need the second snippet, then you configure GTM to deploy Google Analytics to your page. For most use cases you do not even need the noscript tag (unless you specifically configure tags that run in noscript mode).
For you debounce-event you can use a timeout to push an event to the datalayer and then use it to trigger a Google Analytics Event. You can do this either somewhere in your page code, or in a custom HTML tag that is triggered on a Pageview (or DOM ready) event.
setTimeout(dataLayer.push({'event':'deBounce'}),20000);
Then you create a trigger of the "Custom Event" type an in the field "event name" you enter "debounce" (without the quotes). You then use that trigger to fire a Google Analytics tag that is set to event tracking in GTM (you notice already that this is not really simpler than gtag.js, but it allows you to control also non-Google tags so it's probably worth the effort).
The "Event" key is special in the dataLayer object - Google overwrites the native push-method in the datalayer array to listen for object keys called "event". Whenever it hits an "event" key it updates all internal variable from the dataLayer (this adds all newly pushed values) and then allows to fire tag.
Yes you would need both the script to set up GTM. 1st code preferably in the head section and 2nd code in the body section of your website.The code enables tag manger to fire tags by inserting gtm.js in the page.
Once your GTM is set up ,for tracking you can create universal Analytics tag to track your events.Check out the url below for tracking events using GTM.
https://www.gravitatedesign.com/blog/google-tag-manager-analytics-event-tracking-2018/
I've deployed a customer service JS code (Tidio) <script>http://code.tidio.io/ab/abcd.js</script> via GTM custom HTML tag.
I want to pass information to GA and track event clicks on the chat custom code i.e. when a person clicks on the chat button, correlate that to the number of sales in GA.
I'm struggling how to set up the trigger to fire the event to send to GA.
Since the JS code loads custom HTML, is there a way to get it to track when the script is clicked on somehow so I know it's been used and send this info to GA?
Any ideas?
I basically want to know: "Did Customer service aid the user to make a purchase".
Thanks!
Nitesh
You can use Tidio API to trigger a dataLayer event when the Tidio window was opened: "To be able to use the API, you just need to insert Tidio Chat code into your website. You don't need any external libraries."
So for example to fire GTM dataLayer event when the Tidio window shows you just need to include this code on your page:
tidioChatApi.on('popUpShow', function(){
// Your dataLayer event code
dataLayer.push({
'event': 'yourCustomEvent'
});
});
Alternatively you can use "messageFromOperator" or "messageFromVisitor" events to only track visitors that interacted with an operator.
In my product page detail, i have a crosselling section which loads a product list when user scroll down. I can trigger a custom event when products in this section are loads (like productsDowloaded).
How can i send product impressions with google tag manager ?
Implement the data layer following these specifications to track product impressions. If you are sending the data asynchronously, push an event to the data layer (eg: event: 'crossSellReady') and fire your custom event GA tag with a rule based on event = crossSellReady. In the custom event tag, make sure to enable enhanced eCommerce tracking, and the tag should automatically pick up the product impression data contained in the data layer. Let me know if you encounter any issue.
When the page is first loaded the first batch of cross sell products are pushed to the dataLayer as impressions and a GA pageview is sent. The GA pageview is a simple GA tag that is fired after the page is loaded.
After that, when the cross sell products are loaded asynchronously, i.e. whenever the user scrolls down, only those products are pushed to the dataLayer and a custom dataLayer event is fired in the success handler of the ajax request. For example:
// Inside Ajax success handler...
dataLayer.push({
'event': 'Custom'
'eventCategory': 'ecommerce',
'eventAction': 'ajax-load'
'eventLabel': 'cross sell'
});
You create a separate generic GA tag that sends events and is fired when the Custom event is pushed to the dataLayer. Inside the generic GA event tag you set all the of the following macros which are of type dataLayer variable:
{{event category}} -> eventCategory
{{event action}} -> eventAction
{{event label}} -> eventLabel
You can also add a nonInteraction macro in the generic GA event tag as well. Your use case, in my opinion, is considered a user interaction (user scrolled down) so the nonInteraction macro should not be set.
If you are using product lists, be careful of the positions of the cross sell items. Whenever those products are asynchronously loaded, you should note down their positions so you can track their positions in the product list tab of the GA dashboard correctly.
P.S. The generic GA event tag has multiple benefits, you can find more information about what I'm saying by reading the relevant article in Simo Ahava's blog.
See screenshot below. In Google Tag Manager, the Web Property ID is set.
However, when executing _gaq.push(['_trackEvent', …]), then according to
Google Analytics Debugger, it is not available:
Account ID: UA-XXXXX-X
Only when setting the Web Property ID via JavaScript, then _trackEvent works:
_gaq.push(['_setAccount', 'UA-12345678-1']);
_gaq.push(['_trackEvent', 'registration', 'social', user.id.toString()]);
Is it really necessary to set the Web Property ID again in JavaScript? How do I find out more?
Instead of adding events manually and trying to get to work with GTM (Google tag manager). You can actually track events automatically with GTM. Below is a link to that:
http://www.lunametrics.com/blog/2013/10/03/google-tag-manager-auto-event-tracking/#sr=g&m=o&cp=or&ct=-tmc&st=(opu%20qspwjefe)&ts=1391111362
Other than that, instead of adding the Google Id through the default Google Analytics Tag that is created for you. Just create a custom javascript tag and paste your google analytics code in their and make sure it fires on all pages. That should do it as well!