How to implement the google tag manager in react project. I already pasted the script code on index.html and code in the body tag.
And it also working am getting API hits on the network console.
note: I don't have any App.js in my project.
enter image description here
But I need to know is enough or not.
if I move to any other page by clicking the link on the home page GTM API is not in the network console?
How to check it's working on all pages?
Inspect the web page
Go to the console tab
type: "dataLayer", if this property exists, then GTM is set correctly. You just need to create the tags and triggers in GTM to track the events that you need
Related
Folks,
We are in a unique situation here. Our React site integrates with Signicat for identity solution. Most of our user base comes from Facebook i.e. they use the Facebook app, look at our posts and click on links we post which redirect to certain sections in our website which require identification.
So an example link posted on Facebook group https://example.com/en/startpage-in-english/ is converted into https://l.facebook.com/l.php?u=https%3A%2F%2Fexample.com%2Fen%2Fstartpage-in-english%2F%3Ffbclid%3DIwAR3loYqYOvom5k8_mOww89p5tun5H9HqIIKE1ebwwCcB3PD4jzxpTVyZGCk&h=AT1E3p1ejYWH9l2KhUo8D_RVjl_EzKBat4woeMHgRv7yXpT9Y-EZoBcK26sQtjjBBwAQt7Pt83a-i_k5JCGuvOBWfgB9pZ7Uv8LnDlyphNKc1Og0nl6QIqWd_nFEAva3OWN-PZ3byqsU7K0I5A&__tn__=-UK-R&c[0]=AT0-5n51iPMlSYghORXW8qxYXJQEejQTAhfiDQ3P3DK_ZTZM3GWbN4zXYKf-nyD_hWJdxQccenDp-5VgphfWuD6ZQ0ikeXq4lv4bjLbSJVFP9k4IxeMBT5mDa9jNdYnYlNs-DkXOM-LiPhhl-Obra9CAbtvihe-G7-8. When users click on the link, Facebook by default opens the link in its own Facebook browser. The subsequent steps in our portal need the user to identify himself and when the identification is completed and in the final step the request to Signicat hangs forever.
We identified that this issue is only happening with Facebook browser and hence one of the workarounds was to Open the default browser with the link to our website.
Note that:
a. this is not a React-Native app, our website is built using plain React hence the WebView solution does not work.
b. Facebook browser suppresses "window.open" with "newwindow" call and simply displays the site in the same Facebook browser instance.
So bottom line is, we need a way to Open the default OS Browser from Facebook App/Browser with the link to our site. Hope somebody can help!
Thanks in advance...
SG
I have my react website hosted on firebase with custom domain, the domain is added to google search console/google webmaster, the problem is the title and description of website does not change when i search my website on google.com.it keeps showing old title and description.i have tried react helmet, react meta tags, browser clear history, even tried with simple html file deployment, the title and description does not change.Thanks for helping.
It looks like you'll need to ask google to recrawl the website if you would like it changed quicker than it would take google to revist the site organically. There are details on how to do this here: https://developers.google.com/search/docs/advanced/crawling/ask-google-to-recrawl
Ultimately you'll need to Inspect the URL using the URL Inspection tool. Details on how to do this are in the link above.
So i'm using GA to track the pages my users visit. Unfortunately, it's only giving me the main page back. I definitely have more than one page on my website.
I think it's because i'm using React (and only have 1 index.html file) but i'm not sure how to fix this. Thanks!
What you can do is attach google analytics to DIV's and other things. What i suggest is to attach GA to other parts of your apps for better tracking
Please see this S.O. question for attaching to a div: To track clicks on a div using google analytics
If you have a GTM installed on your website it's possible to use a History change tag that has been created for such cases.
It fires every time an URL changes, even if a page doesn't reload completely. So that every time a user visits a new page (with new URL), this tag will send a pageview to GA.
if your site is single page application then you will run into this case. You will have to detect the page change by some callbacks and then trigger page view manually. Uladislau Khatskevich thought is correct history change event can be used for it, if GTM is used. History change event will help you in detecting when the page is changed. If GTM is not used then you have to provide a callback when page change
In a simple Ionic app I have a plain web view with some embedded videos. These embedded videos are included with an oEmbed iframe. Video works fine, but almost every video provider has a link to watch the video on the provider's page. For example Youtube always has a button 'watch on Youtube'.
When my users (accidentally) click that link, the whole Cordova web view is taken over by the linked URL. Instead of my app it shows the Youtube video. Then the user never gets to go back to my app, except by closing and opening the app.
I've tried to:
Prevent navigation by watching $locationChangeStart, that doesn't work as it doesn't fire for external URLs (like Youtube's).
Prevent navigation by using window.onbeforeupload, but that doesn't suffice as it doesn't guarantee the user navigates away and it presents an ugly confirmation popup.
Any other ideas on how to prevent navigation to external URLs from an Ionic/Cordova app would be highly appreciated.
You should provide more info, how do you insert the videos? some code?
I don't use videos, but I had a similar problem with google maps, if the user clicks the legal link, the page nativate to the google legal page and the user can't go back.
To fix this, I installed inAppBrowser plugin and used this code to open the legal page inside the inAppBrowser window
$('#map_canvas').on('click', 'a', function(e){
e.preventDefault();//you prevent the default click
window.open($(this).attr('href'), '_blank');//you open the link on the inAppBrowser window
});
So you should inspect the video to see if you can do something like this, preventing the link click and opening it on the inAppBrowser plugin
You will have this problems using externa players, a possibel solution would be to host the videos on your server and use some jquery/angular video player.
insert
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
in your index.html. So when you open a link,it'll use your device browser.You can come back from the device browser to your application with android back button.
You should probably give your url's like this
var ref = window.open('https://www.******.com/', '_system', 'location=yes');
I have a tab with an iframe external web page that loads... I would love a hyperlink inside that web page to link one of my photo albums in "theater" mode so you don't leave the page. However, any link I program inside that web page just brings in that photo album inside (not popped up and not in theater mode no matter if I have the &theater in the url).
Can I get some help on how to do this? Thanks!
this is a limitation of iframes in general. Less of a limitation and more of a security issue. As you said.. the iframe loads and external page - a page that could essentially come from anywhere. To protect the integrity of the site displaying this external page, the iframe can not access the page that contains it.
You might want to try opening a new window using javascript :
window.open ("{path_to_image}","title","menubar=1,resizable=1,width=350,height=250");
as you can see there are several options that you can set to customize the popup window.
Here is another link with some info about iframes