Unable to effectively use Google Tag Manager with Turbolinks - ruby-on-rails

I'm using Google Tag Manager with a Rails 4.2 app with turbolinks. I'm completely stumped and am completely unable to use Google Tag Manager effectively with turbolinks.
Google tag manager seems to repeatedly sense new page loads (the <body> tag getting replaced) as new installations of google tag manager. When I look at my Google tag assistant recordings I just see an endless sea of Green Tags for Google Tag Manager.
Anyone have any leads on resources where I can figure out how to use it effectively?
I've looked at Googletagmanager with Turbolinks which seems to be slightly dated, but also doesn't solve my problem of errant installations.

Replacing the tag will may all kinds of side effects (as you now realize, one being that the code is re-initialized and fires gtm.js events), so I suggest you drop the noscript part and move the rest to the head - I don't really know turbolinks (or RoR), but according to this article turbolinks will not reload the head.
Unfortunately there still might be side effects in an SPA since all items pushed to the dataLayer will just stay there. You might want to consider reseting the dataLayer when you load new content:
window.google_tag_manager[{{Container ID}}].dataLayer.reset();
Where {{Container ID}} is (obviously) the GTM-XXX id for your container. Don't just over the dataLayer variable with an uninitialized array (dataLayer = []) since GTM adds some methods to the dataLayer variable that will get lost if you overwrite it, and your GTM instance will stop to work.

Related

How to properly format an image url in a Vue.js single-file-component?

After about a week of tinkering, I have managed to introduce webpack and Vue.js single file components into my existing Orchard (ASP.NET) module.
Now I've unexpectedly hit a snag, and for the life of me, I'm stumped. I have several image resources that are part of my custom Orchard theme, which is a separate module (*.csproj) within my Orchard solution.
So (at the risk of demonstrating my woefully inadequate understanding of URL concatenation in web projects) I innocently add this line to my Vue.js single file component:
<img src="~/Themes/MyOrchardTheme.Theme/Images/AnImage.png">
Now when webpack tries to process this and bundle my component I get this error:
Can't resolve 'Themes/MyOrchardTheme.Theme/Images/AnImage.png' in 'redacted' C:\Projects\Orchard\Modules\redacted\Module not found
This kind of makes sense, because the layout of my projects and resources locally and the layout after deployment to Azure obviously differ.
So what is the right way to specify the url for my image as it will exist at runtime on the server, without specifically testing for it's existence when transpiling with webpack?
I'm not going to accept this as the answer, in case someone can offer something better, but after some tinkering I was able to solve my problem by using this:
<img :src="theimage" />
and adding a computed property like this:
computed: {
theimage: function () {
return '/Themes/MyOrchardTheme.Theme/Images/AnImage.png';
}
This will bypass the Webpack transpiler (or vue-loader or whatever) check to make sure the resource can be located and has the added benefit that I can programmatically control the image displayed, which (although not mentioned) is ultimately what I wanted to do (code not shown). I was expecting to use v-if or v-show with multiple image tags, but using a computed property killed two birds with one stone.
Thanks to everyone who provided feedback. - I have a great deal to learn!

Rails - Back button generates duplicate server requests

I just encountered a strange behaviour in my current RoR web app: every time I use the browser's back button (multiple browsers tested, safe mode included), the GET request is being sent multiple times, duplicated. Sometimes twice, but up to 5 times in a row in under 3 seconds. This also causes the SQL queries to run multiple times, doing the same thing.
If I use links to go back, or paste URLs to access the previous page, this does not happen.
Did anyone encounter this, or know what could cause it?
Thanks for your help!
Best,
Alex
Although I've found this to be caused by other issues, the main cuprit is Turbolinks.
Basically, Turbolinks loads the body of your new view via ajax, instead of pulling the whole page (it's meant to speed up the application in production).
It's often the case that Turbolinks will cause issues such as duplicate requests when pressing the back button etc... although to get it with every browser is very strange.
--
Due to a lack of code, I can only speculate on this issue.
It's probably wrong, but a good test to see if it replicates is to remove the references to turbolinks in your JS files; specifically:
#app/assets/javascripts/application.js
//= require turbolinks <- remove this line and see if it fixes the issue
I'll happily delete the answer if it's inappropriate. You'd be best putting up a public repo so that people can see what infrastructure you have.
For me, I realised that the issue was caused by javascript_include_tag out of head tag in aplication.html.erb.
After moving to correct place (inside head tag, right after stylesheet_link_tag) the multiple requests was gone!

Changing a subarray in document will not rerender with proper order

I am using jQuery UI sortable to update the order of an array stored in a container document. When the sort fires the "stop" method, it rebuilds the array and orders it based on the new DOM layout. It all works fine and the updated document reflects the proper order. HOWEVER, the dom reloads and the order is back to what it was.
When I physically refresh the page it actually shows the proper order. It's just that on-the-fly changing of the array won't just re-render itself properly.
Interestingly enough, this problem has only cropped up in 0.9.4, so it may be a bug with meteor, just not sure if there was a change that would affect what I'm trying to accomplish.
I'd provide code examples if needed, but since the code itself seems to be working properly and the each not updating to reflect the order, i'm not sure it'll help at all.
Thanks!
UPDATE
I've put together a standalone demo of the problem, listed out in my comment below:
Ok, here's a crazy example of the issue:
demo: app-9ryym2m2.meteorpad.com
source: meteorpad.com/pad/uQ42DRH95JcHtKnb9
Try doing some sorting of items to see part1 of the issue. Next, after sorting, try hitting the togglers a few times, especially within the list of items you sorted. That's part2 of the issue. Now, if you refresh the page, everything gets caught up. Wat.
Double Update
Thanks to aldeed over at Github, I've got a solution: https://github.com/meteor/meteor/issues/2944
By changing my sub-document reference key from 'id' to '_id', Blaze seems to pick up on the changes to sorting no problem!
I confess that I haven't dug into your code, but the way it is updating indicates that you are picking up the previous state rather than the updated state. Wherever you drag, the final state reflects the last place you dragged to (even though it was probably in the wrong place when you started). Perhaps an order-of-execution/async bug?
Have you seen the drag and drop demo that was put together for blaze by Avital Oliver (Meteor core dev) when the blaze rendering engine came out? You can watch a video and check out the repo. If you try the demo and it fails on the current version of Meteor, you can submit an issue there and get some support from the pros :)

jQuery mobile.changePage returns to first page after initial changePage

Here's a problem only with web browsers on the computer, in other words it's not a problem on smart phones as an app.
I updated my jquery mobile framework to the latest release, and i'm trying to log into my account which loads other pages, but as soon as it loads the other pages it loads back to the log in screen. My question is, are there any background functions tied to the changePage function that have changed since 1.0b2'ish release which may affect this?
There have been several changes made to the $.mobile.changePage() function including some deprecations that had code removed for the 1.0 release (latest at the time of this writing).
If you go here: http://jquerymobile.com/blog/, and search for "changePage", you will find some interesting information like this:
Removed support for the alpha signature of $.mobile.changePage() in
preparation for 1.0. Folks now how to use the signature that requires
the toPage (url or element) as the first arg, and options object as
the 2nd. See the events API documentation and commit log for more
info.
You could also take a look at the documentation for $.mobile.changePage() and make sure the current documentation fits with how you are currently using the function: http://jquerymobile.com/demos/1.0/docs/api/methods.html
Updated doc link for 1.1.0: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

Open node in Umbraco programmatically

I have created a dashboard for an Umbraco site and I want to link from it to various node in the tree.
From what I can tell Umbraco uses editcontent.aspx?id={thenodeid} and javascript:opencontent({nodeid}).
Whenever I try to use these they always fail.
Does anyone know how to open a display a node in the Umbraco back end?
Like Tim Saunders said you really just need to target the correct iframe. The openContent function looks like this:
function openContent(id) {
parent.right.document.location.href = 'editContent.aspx?id=' + id;
}
So you need to target the 'right' iframe.
I've tested editContent.aspx?id=1234 on my Umbraco installation and it seems to work correctly.
I'm assuming you are replacing {thenodeid} with the actual node id you want?
Umbraco uses iFrames in the backend for the content tree and the content areas etc. This means that you do not always have full access to the Javascript libraries from the frame that you are in.
Therefore you may need to either include the library in the page you are working with or try and reference the method calls by walking up the dom.
I can't find any documentation for this so it may be a case of looking at the HTML source and working out what is going on.

Resources