Getting GTM code working on web application - javascript

Our company uses a third party service for our career/job site, allowing users to submit applications for job postings. Initially, users land on an external facing platform which integrates nicely with GTM. Within the CMS, you can easily add GTM code to the header and body area. However, once a user clicks 'apply' on a job description, they're redirected to a web application, which is essentially a separate system. Unfortunately, this second system does not allow you to add code to the header or footer. I am, however, able to add code to the "thank you" page which users see when they submit an application.
On the "thank you" page, the only way to insert the GTM code is using a WYSIWYG. You cannot insert the code into the <head>, but you can insert it into the <body>. I know it's not ideal, but it's the only option.
Even though I can get the code to render on the page, it's not working at all. It's not recording pageviews, Google Tag Assistant doesn't see the code, and Google's GTM toolbar doesn't show up when the GTM container is in preview mode.
From what I can tell, the page does not refresh when a user submits an application. Thus, I'm assuming that is the reason why the tag is not working. I've tried using a number of different triggers, based on advice I've read online, but none have solved the issue.
I'm just using the standard GTM code, but I'll post my code below anyways:
<!-- 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','###');</script>
<!-- End Google Tag Manager -->
NOTE: I'm also utilizing the <noscript> code immediately after the <script> code.

It would appear that the site you are trying to inject GTM into, takes steps to prevent you from adding JavaScript into their page.
This is a very common security measure on sites that allow users to add content to pages, as instead of GTM you could add something that attacks their server or place a bitcoin miner on the page.
https://en.wikipedia.org/wiki/Code_injection
Your only solutions to this is to ask your provider to support GTM directly, or if your lucky you may find the <noscript> version does work and that might be enough to meet your requirement.

Related

How can we set analytics.js cookies after user confirmation?

With GDPR coming into force, we wanted to restrict our application from dropping any cookie until the user confirms his/her consent.
To do this, I have disabled the analytics on page load by using the following config.
window['ga-disable-UA-XXXXXXXX-X'] = true;
After user gives consent by clicking on the cookie banner, I have to enable tracking.
Theoretically, I have to enable it by adding the below line after user action.
window['ga-disable-UA-XXXXXXXX-X'] = false;
and run the analytics.js again which i am not sure how to.
I have found a solution for the legacy ga.js but not for analytics.js.
Is there any other way of doing this which i am missing?
Any pointers would be appreciated.
What is widely used is the use of a cookie message. This message can be fired by Google Tag Manager or a snippet from a tool (for example Cookiebot) that is hard coded on your website. Since Google Tag Manager does not collect any PII you can use it without any permission. When the cookie message has fired you can collect a cookie when they give explicit permission. Collect this cookie within Google Tag Manager as a variable. When you want to send data for example to Google Analytics (tag) you can set a trigger which has certain constraints. for example send a pageview (tag) when someone hit a pageview (trigger) and has given permission (variable).
Take a look at how Google Tag Manager does it, might help or could even use GTM.
To implement Google Tag Manager on your website:
Copy the following JavaScript and paste it as close to the opening tag as possible on every page of your website, replacing GTM-XXXX with your container ID:
<!-- 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 -->
Copy the following snippet and paste it immediately after the opening tag on every page of your website, replacing GTM-XXXX with your container ID:
<!-- 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) -->
Many tag management operations can be achieved by just doing the basic code installation, but if you'd like to have finer grain control over tag events or data, you may want to use some customization using our asynchronous methods.

Javascript; onClick tracking for third party app that only allows only basic HTML code editing

I've got a third party app on my website, that allows me to receive bookings for my hostel.
The idea is to get some funnel tracking going into google analytics. My access to the code of the app is limited, I'm guessing it will not allow me to insert javascript, because this code will not work even though it shows up in the source code of the iframe on my website:
email
The app will allow me to enter some html code into it's iframe on my website. For example, the link in the above example ended up in the iframe on my website and it works.
So I figure to write some javascript that will trigger when somebody clicks that link in the iframe of the third party app. I plan to load this into the page header:
<script type="text/javascript">
<!--
$('#mailto:x#xxxx.com.br').click(function(){
_gaq.push(['_trackEvent', 'BookNowApp', 'BankEmailClicked']); return false; });
// -->
</script>
The website is http://www.3dogshostelsaopaulo.com (click "BookReserva" for the app)
I'm hoping that with the above script, the only thing I need to incorporate in the HTML of the third party app is that clickable link. Any ideas why this wouldn't work are greatly appreciated!
How are you defining _gaq in the iframe?
I assume the google tracking code is part of your website and is not available in iframe.
If that is the case, the JS in iframe doesnt know what _gaq means and the tracking will fail.
EDIT:
Since the iframe and the parent window are form different domains, the browsers wont allow communication between them for security reasons. There are some solution available to make such communication possible, but they somewhat complex. Here are a few references:
How to communicate between frames?
http://stevehanov.ca/blog/index.php?id=109

When is JavaScript content crawlable (if ever)?

I wish to implement a timeline feature on a website I am developing for a Twitter timeline. One option I have is crawlable and available directly under Twitter's settings under "widgets:
<a class="twitter-timeline" href="https://twitter.com/hyttetomter" data-widget-id="289297710840954880">Tweets by #hyttetomter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
The code is firstly not valid script for XHTML so I looked for a plugin or script that was and foundthis plugin that was and found a plugin called Tweet for jQuery as it's customizable for CSS, but is this crawler friendly?
What are the tecnicalities that seperate script that is crawlable from that which isn't? Should I just turn of JavaScript to see for myself? Is jQuery content ever crawl-able and what actions must (assuming there are) I take to make any of my own jQuery-generated content crawlable? I have found mixed references online regarding this so please direct me to a trustworthy resource if you feel it can assist me.
Crawlers fetch HTML pages. That is their only functions. They get the name of your stylesheets and javascripts because they are part of your HTML document head (as link and script tags) but their purpose is neither to style the pages nor enhance the behaviour. They fetch HTML static information and parse in order to make assumptions about its content. If your content is being generated after a javascript trigger, then the crawlers are not going to get it.
One solution to make it crawler-friendly is to make a fallback for them. But this has to involve rendering your twitter information on the server-side. Facebook does this:
<noscript>
<meta http-equiv="refresh" content="0; URL=/home.php?_fb_noscript=1" />
</noscript>
Facebook inserts this meta tag in its document header. It is only triggered for noscript cases (hence, crawlers), and refreshes the page with the given url, which in the facebook case means "render the wall on the server-side, dude doesn't have javascript". Of course, crawlers have to know how to proceed with this tag.

How to I put ads on 100% JavaScript web applications?

Placing ads on JavaScript web applications has turned out to be much harder than I thought. First of all, when I say "100% JavaScript web application" I mean a tiny HTML file that loads and initiates a JavaScript file which draws all the content on the page. In other words, the website is completely empty until the JavaScript has executed.
Adsense is out of the question. They immediately deny your ad application based on an automatic scan of the website where they "discover" that the page "has no content". I've sent a bunch of mails to Adsense support trying to get somebody to manually check the application instead, but they have all been responded to by the same auto-generated "no content" email.
I have also tried using Chitika, but after hours of trying to get the ad to display I've given up. It simply doesn't work when I add the ad code after the page has opened, which I have to do in a JavaScript application. I also tried placing the ad code in an iframe, which does work, but the ad loses the context of the page, which is quite important because it can't find the Google search terms.
Do you have any experience with placing ads on JavaScript applications? How do you do it?
#Dan in the comments has a point here -- if Adsense can't get any sense out of your site, then neither will the Google bot, which means your site won't show up in Google.
If you want any kind of traffic for your site, then the very least you need to do is create a splash screen from regular HTML that Google can hook into. If that is then overwritten by the JS code, that's fine, though it might be worthwhile leaving it in place for all users until they click a 'start' button or something.
The splash screen page will also give you a starting point for somewhere to place your ads.

Transfer custom text on Facebook using like button

Here's the thing.
Recently I've tried to add FB like button to some website I'm administrating and that was easy, but now I have a request I don't know how to handle.
The thing is, when you like some website, on your FB wall is posted a link (and some other stuff maybe) to that website, its by default and I know I can change that.
What I need is this, on my page I have a (html)div that is loaded dinamycally with some important data and I need to post that particular data on my FB wall.
I tried using javascript and open graph meta tags but it seems to me that these meta tags cannot be changed dinamycally.
If anyone has an idea how to do this, feedback is more than welcome.
Sincerely,
Milos
No, you technically cannot do this.
When you share a link on Facebook, Facebook servers visits the URL specified on sharing, collents META information and displays those.
However, Javascript runs after content is loaded and on browsers, and I don't think Facebook servers run javascripts before getting META information.
Therefore, even if you change Open graph meta tags dynamically, FB still uses old tags (which is set on initial page load).
You should figure out a way to set content before sending HTML to client.
I found a solution to this issue. This can be done using iframe to integrate FB like button. Piece of infrormation you need to do this can be found here.
It shows the FB like button and you can add your url in without having to mess up with meta tags

Categories