How to track external (js added) HTML in GTM - google-analytics

I would like to ask, are there any solutions to track HTML added after DOM is loaded? There is a JS script which adds piece of HTML I cannot track by default rule in GTM. Basically "Link click" & "Any element click" is not working.
Thanks for answers!

Related

GTM both scripts (script / no-script) in header are working?

I have a question for GTM tag.
Actually, the customer put GTM tags (both tags - script /no-script) in the header.
Personally, I think it works well but I am not sure because I have this messages from google tag assistant. (which can verify the tag is working well or not)
enter image description here
Could you give some advice for this one?
I am not sure whether this works just fine or I need to ask customer change something for this one.
Thank you
If you have the option to implement the tag correctly you should. If you are using WordPress you could also use a plug-in.
The purpose of having and tag is ,
tag is used by default to collect analytics on the site and it is placed in header because its a tag(all scripts should be in header) and to collect information immediately when the page starts loading .
The shouldn't be placed in header section because its not a script and only scripts should be in header and also the use of tag is if a user disables the javascript while browsing the site then the no script tag will be used to collect the analytics on the site .
So, the its always good to place script tag in header as high as possible and no script in body as high as possible

Hide or Change CSS and Script files address from source code?

I have a website and I want hide the CSS and script files address from source, when user clicked right and press "view source", CSS and script files address were changed. (as well as in firebug).
Like google! please go to google.com and press right click, then "Inspect Element With Firebug", see Style in right box. You will see "www.google.com #2 (line 9)" for example! and you won't see any address for CSS files!
How is this possible?
If you meant viewing the page source and not seeing any style links there, that's because Google uses some JavaScript framework, perhaps GWT: https://developers.google.com/web-toolkit/ . You can see a lot of JavaScript gibberish on the page, right? That JavaScript creates all the style elements etc. in the DOM. And you indeed can see the resulting style definitions when inspecting the elements, be it Firefox or Chrome.
You can do the same. But that design is quite different from classic HTML + JavaScript.
But others are right, you can't hide anything that way, and you shouldnt. It's security by obscurity at best.
As far as I know, you cant prevent users from seeing these files. They can see these files as well as can also download them if they want.
All you can do is to minify these files using some kind of minifier like JS Minifier for JavaScript code.
You can place your css in inline tags. Simply copy/paste the contents into your .html document in a ... block. Then you won't have an external .css file.
The advantage is that you save an http hit. The disadvantage is that you have to download the full css every time because you can't cache it.
You can also minify your css which will obfuscate it to a certain extent. But you can never really hide css from someone who downloads it.

Open a link in a new window in reStructuredText

I want to open a link in a new window using reStucturedText. Is this possible?
This opens link in the same window:
You can `check your location here. <http://geoiptool.com>`_
To open a page in a new window or tag you can add the attribute target="_blank" to your hyperlink although I'm not sure how you can add attributes to inline hyperlinks in reStructuredText. However, from the Docutils FAQ, is nested inline markup possible, you can use the raw directive to include raw HTML into your document, for example
You can |location_link|.
.. |location_link| raw:: html
check your location here
Update to address comments
I've had the question "why does reStructuredText not have [insert some awesome feature]".
In this case, "why does reStructuredText not have a way to specify how links are opened" — I think reStructuredText doesn't have an easy way of doing this since the behaviour of how clicking a link works isn't really it's responsibility. reStructuredText transforms markup — how that markup is ultimately displayed is not up to reStructuredText, but whatever browser or viewer the user chooses to use.
In the case of opening a link in a web browser, good useability practice dictates that you should not force a user to open a link in a new tab (which is what adding target="_blank" is doing). Rather, you should leave the choice of how to open the link up to the user. If a user wants to open a link in a new tab, then they can use their middle mouse button (or whatever their favourite shortcut key is).
So I think that it is perfectly acceptable that reStructureText does not have an easy target="_blank" feature. The fact that it is possible is nice for people who really want to do this is good, and the fact that it is a bit of pain to do so is good for discouraging this practice.
If you don't want to modify the theme, you can do what Ivonet did but with a custom.js file in the _static/js folder, then adding it to the conf.py like this:
html_js_files = [
'js/custom.js'
]
Leave out the html tags in _static/js/custom.js if you do this:
$(document).ready(function () {
$('a[href^="http://"], a[href^="https://"]').not('a[class*=internal]').attr('target', '_blank');
});
This will also work if you'd like a shorter version.
$(document).ready(function () {
$('a.external').attr('target', '_blank');
});
I agree completely with the accepted answer, especially with the part where reStructuredText is not responsible for how a link behaves.
I still want it though so it should be solved in the theme. As I want all my external links to open in a new tab it becomes very cumbersome to do it as described above.
In my case I use a third party theme (sphinx_rtd_theme) and I put the following script near the end of the layout.html:
<script type="text/javascript">
<!-- Adds target=_blank to external links -->
$(document).ready(function () {
$('a[href^="http://"], a[href^="https://"]').not('a[class*=internal]').attr('target', '_blank');
});
</script>
It seems to do the job just fine.
Hope it helps.
I recommend that you should use JavaScript to set target="_blank" for each external links.
See https://github.com/sphinx-doc/sphinx/issues/1634

How to attach html file so that gmail's "view" option works

I have a script that sends an email with an html attachment. When I select "view" in gmail I get text...however when I click on "download" instead of "view", then open it, it displays as it should.
I think it's gmail related because I observe the exact same behavior from IE, FireFox(win/linux), Chrome(win/linux)
I made a youtube video of here:
http://www.youtube.com/watch?v=WkGyxcFQXS8
Am I doing something wrong?
Thanks
Not all email clients support the <style> tag. Gmail is one of those; it only respects in-line styling.
If your code is producing the css & html, then you could change it to use in-line styles for the table.
If you want something more auto-magic, see How do I use Google Apps Script to change a CSS page to one with inline styles?.
One way around this would be to have your script simply host the HTML file somewhere, and email a link to that file.
I cannot find any documentation from Google or the GMail team, but I would be surprised if they allowed HTML attachments to be opened and viewed (this would be a security risk, since they would essentially allow their email servers to host user-generated web content).

Increase size of Facebook Like Button

I am developing a feature where I want to increase the size(width and height) of Facebook Like button which is getting rendere on my page.
I have tried overidding the css but it is not working as my css is loading very late.
Help required.
Are you sure you're using the correct overrides in your CSS? If I'm not mistaken, it doesn't matter when the CSS is loaded, just that it is loaded.
Be sure to check your CSS includes in the header file to make sure you're using the latest version. Also double check the classes or ids you need to override.
Perhaps you could post the code containing the like button you're trying to manipulate. If you're loading it in via Javascript you can use Firebug or other Web Inspectors to find out the actual HTML that gets inserted.
First of all, the css MUST be interpreted by the browser before the html element it refers to is loaded...
Second, the reason you can't select the button through CSS directly, is because it is rendered inside an iFrame that is controlled by the Facebook framework (you can check this out with firebug or any other inspector).
I'm not sure if it's feasible, but you have two possible ways to do it:
use javascript and the DOM to access inside that iFrame, select the button and style it.
create a button yourself, and give it the same href as the one generated originally, thus losing the fan-counter capabilities and whatever else is part of their framework

Resources