Track traffic sourcse in Google Analytics Nuxt module - javascript

I ve recently implemented Google Analytics module for my Nuxt website.
I did it by installing the module then configuring it in nuxt.config.js as follows:
gtm: {
id: 'GTM-WGW****'
},
googleAnalytics: {
id: 'UA-230******-*'
},
Event tracking is working very good when it comes to purchases but for some reason when I want to see the source of the event (ex: google, facebook etc) all it shows is Stripe. So i get no source data about the user that is browsing my website.
I have tried using rudderstack in combination with this Nuxt module but it doubles my traffic (as it should)
Do you have any solution for how I can track traffic source using the Nuxt Google Analytics module ? ('#nuxtjs/google-analytics')
Thanks in advance!

Ok so after joining the Stripe discord and some more reading, the only way is to go
in your GA dashboard and add stripe.com and checkout.stripe.com to the refer exclussion list.
Happy coding!

Related

How to check if the SharePoint site is opened from MS teams or not

I have a SharePoint site and added it to Teams as an app , and it works fine. I want to check on a specific page of this site if the page is now running from MS Teams or not . 
Is it possible to do that with jQuery-JavaScript or is it applicable or not? .
Thank you in advance .
General Idea
Deploy an SPFx Webpart that is executed in the context of the User and the Sharepoint Page.
Use available React Packages to see in which Platform is the code executed.
If step 2. succeeds, we will have all the available information about the Platform that the user is using in order to document it (e.g. a serverless API, Application Insights or something else...)
Create the SPFx WebPart
I have made a github repo containing the package, which you can easily build and deploy and check out that the Browser information is displayed once the Sharepoint Page is visited by the User.
In order to support my Proof of Concept, I utilized a React Library called react-platform-js which is just a wrapper of the platform.js script and is available in most JS frameworks, so you should not find it difficult to use it with JQuery, for example.
Inserting the below parchment in the code:
<Platform>
{props => {
return (
<div>
OS: {Platform.OS},
OSVersion: {Platform.OSVersion},
Browser: {Platform.Browser},
BrowserVersion: {Platform.BrowserVersion},
Engine: {Platform.Engine}
</div>
)
}}
</Platform>
in the .tsx of the WebPart Component, as per the documentation and rendering the available information we can see that once I visit the page from a Browser we get the below image:
Where it can be seen that the Browser in use is
OS: Windows, OSVersion: 10, Browser: Chrome, BrowserVersion: 106.0.0.0, Engine: Blink
After adding the same Sharepoint Page to a Teams Tab in order for Users to access it easily, we get the Below image:
The message has switched to
OS: Windows, OSVersion: 10, Browser: Electron, BrowserVersion: 10.4.7, Engine: Blink
Which is correct, as it is documented on the MS Docs site.
The above scenario, basically, means that it is possible to access the Platform Engine Information where the Sharepoint Page is rendered.
Afterwards - What do we do now that we have the Data?
There are some alternatives as to what you wish to achieve. I will list some of my thoughts below.
The first and developer-y way to go, would be to create a custom Web API that is posted once the page is accessed with the information at hand, and afterwards, another automated procedure (Azure Function, for example) would be executed and would produce a report.
We could utilise the Application Insights Service that Azure is able to provide, in order to monitor the Sharepoint Page Usage, and since you can modify the script that it provides you could document the percentage of users that visit the site via Browsers and via Teams, with custom events. Please be careful and read the note on the page which urges us to use SPFx application customizer solution for modern pages
Final Thoughts
There are many ways to extend the Sharepoint Platform, but all depends on what resources you have. I listed some ways to perform some basic metrics reports, but unfortunately, I cannot know which path suits you :P
If I was looking at a Production-based scenario, I would create an SPFx Application Customizer in order to have it deployed via a more automated way and not have a WebPart added to all pages of a site, but that's also personal preferences :)
I would be nice if you share which solution you chose and ping if there is something I can help with :)

Service Worker with external links

I´ve got a project that have external URLs and internal URLs too. It´s build with React but the Service Worker seems to cache all internal links and that is ok, but when i want to go to the external URLs it doesn´t navigate to that links, not even when it´s working online.
Is there any way to do service worker functions with external URLs?
Thank you
Edit:
I found this on github made by GoogleChromeLabs that have the answer itself... Just have to install sw tools and use the options they give https://github.com/GoogleChromeLabs/sw-toolbox/blob/6e8242dc328d1f1cfba624269653724b26fa94f1/README.md#toolboxroutergeturlpattern-handler-options

GatsbyJS - Automatically re-build & deploy project on changes in the Wordpress backend?

I was wondering whether there is a way to automatically re-build & deploy my gatsbys site, once something changes in the wordpress layer (i.e. somebody adds a post)?
I am thinking of using gatsbyjs with a client and want to enable the client to update content automatically, but would love to keep the site static. Is
there anything like this out there? Any advice on how I may proceed?
You can setup a webhook from WordPress that will trigger your Gatsby build process to run again. If you are deploying to Netlify, they support webhooks to trigger rebuilds. If you have some other build process, you will need to decide how to have it re-run on a web hook.
WordPress.com supports webhooks, and there are plugins available for self hosted WordPress sites.

How to develop a Bigcommerce app that would add a javascript tag to all pages in the store?

I would like to develop an app for Bigcommerce that other users of the platform could use. The app should add a simple javascript embed code to all pages of the store. The embed code is similar in nature to google analytics embed or chat services embed codes.
I have opened up a trial account with Bigcommerce and found out that it is very easy to manually edit the page templates to add such an embed code, but I would like to be able to develop an app that store owners could install and not have to mess with editing and copy-pasting embed codes into their page templates.
Unfortunately there is no mechanism currently for BigCommerce that allows for the editing of template code via the app.
I can give you pointers as to where you can put your code to make it globally available.
If you need something in the <head> globally: /Panels/HTMLHead.html
If you need something at the beginning, right after the <body>: /Panel/DrawerMenu.html
If you need something at the end, right before the </body>: /Panels/Footer.html
These are the 3 common places most javascript things (like tracking pixels and analytics) usually go.
Other "extensions" for BigCommerce, such as OLark and Zendesk and Analytics, all just give either a web page with instructions, or a PDF with installation instructions. You could provide your functionality via the same means in lieu of an app doing it.
I haven't really worked with Bigcommerce, but I went thorough their docs and it looks like there is no option for custom module that you can upload and use on their server. And that makes perfect sense.
So I would say the only "forth to try" option is to build browser extension, that does the job for you. As I understood, you can control html output of your store by choosing "Themes" tab > "Edit HTML/CSS", so extension should be able to walk through the three of pages in the left panel.
Chrome Extension
Firefox extension

How to send 'custom variables' parameters in Measurement Protocol(GA)?

I'm develop on a html5 project. The project is an news reading html5 site. It has offline reading feature, now we need to integration the Google analzyer to get the user access report.
But we found the GA js sdk do not support offline function.
Then I try to get more information on the GA help site. I found the Measurement Protocol can help to do this.
It's said we can send the GA request through the API. But I stop again on the develop process, because we need to send custom variables like JS SDK:
_gaq.push(['_setCustomVar', 1, 'user-online', 1, 1]);
I've checked on the GA help site but not any informations about the "Custom Variables".
I think this article should be of help but there are no more detail sample code to explain the parameters.
Universal Analytics (UA) is what the Measurement Protocol drives. They've changed quite a few things. Not sure about the accuracy of the other elements of this article, but it is correct about the fact that Custom Dimensions have replaced Custom Variables in UA https://www.optimizesmart.com/beginners-guide-to-universal-analytics-creating-custom-dimensions-metrics/
Head here to read about Custom Dimensions https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters#cd_
Did you read this? https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiBasicConfiguration#_gat.GA_Tracker_._setCustomVar
It's name, value and scope, identical to the old analytics

Categories

Resources