Develop Reference

Tealium IQ: overriding utag_data values within the dev google chrome console?

Hi the stackoverflow community,
Being newbie in Javascript, i would like to know if there is a way to do like a 'datalayer.push' function or equivalent with the Tealium's datalayer to override the values implemented by my dev into the website's datalayer.
Can you please provide some code example of how you will do it ?
My idea is to do 2 things:
to show the dev what is the expected value for a specific variable directly 'live' even if i don't have any access to the CMS ==> like an overriding of the value for the variable
to get the possibility to trigger some tags or some events (e.g via the tealium IQ extensions) directly from the dev google chrome console
I was able to do it previously with Google analytics with some websites which were using Google tag manager.
Because i don't have access to the CMS, i should only use the Google dev console
Many thanks for your help
Sébastien

The Tealium support's team provide me the answer.
You should use your console & rewrite the datalayer
// example of rewriting the datalayer driectly within the google debugger dev ==> 'console' tab
utag_data = {"site_region":"test_test","site_currency":"EUR","page_name":"Tealium test","page_type":"test_test","tealium_event":"page_view","country_name":"France_test","country_code":"FR_test"};
rewriting the datalayer with utag_data.jpg
But if you like to keep it accross your session & when you"re refreshing the page; you need to enable
"persistent" + "enable local Overrides"
As a result you will be able to acess to the utag.js script in editing environnement on which you changing the tealium's datalayer and values.
After, you can refresh the pages and the values will be keeping the new values you defined for the datalayer's variables.
Hope my comments can help the community,
Regards, Sébastien

Determine if active tab contains an editable Google Doc

Suppose my extension has obtained the URL for the current active tab using the method suggested in How can I get the current tab URL for chrome extension?, e.g.
chrome.tabs.query({
active: true,
lastFocusedWindow: true
}, function (tabs) {
// use first tab to obtain url
var tab = tabs[0];
var url = tab.url
});
How can I determine if the URL refers to a Google Doc to which I have editing rights? The distinction between ownership and being an invited collaborator is not important for this application. I'm interested only in Docs as opposed to Spreadsheets or Forms.
For context on what I'm trying to develop, see: How to manually generate notifications to a Google Doc collaborator?

Alternate answer, based on the Google Drive API rather than the Google Docs UI.
Before doing any of this, make sure to declare permissions in the manifest (to only match URLs that look like docs.google.com/document/*).
Here is a broad overview of the steps you could follow:
GET a
file,
which will return some metadata. You can use the URL you have to extract the relevant ID which is used in the GET request.
Use this metadata file resource to retrieve a permissions resource
In the permissions resource, look at the role attribute: it will be either owner, reader, or writer. You will not have editing rights if you are a reader, but should have editing rights otherwise.

Here is a side by side view of a google doc, where I created a doc, generated a sharing link, and opened it in a browser where I was not signed in to google. I would suggest using a content script to insert a "find" function which would return either true or false if it can locate the "view only" button in the DOM ("view only" meaning you do not have edit permissions). You could make the content script match URLs that look like docs.google.com/document/* only.
Caution: google changes UI pretty frequently so this may not be future-proof. Try inspecting the source of google docs in both situations to look for more clues.
Side by side view:
Source code in the chrome devtools:

How to develop Chrome extension for Gmail?

I'm thinking about developing Chrome extension for Gmail and I want to know what are the current best practices.
For instance:
attaching a GPG signature by default to every email
adding an extra button that does something (I have it already)
hijacking action of sending email and prompting me to do complete something
...
(just them examples helping me to discover what is possible)
There are quite a few notable extensions that significantly augment gmail functionality:
http://www.boomeranggmail.com/
http://toolbox.mxhero.com/
http://www.wisestamp.com/
...
(I'm not affiliated with any of them, I just named a few)
One option would be to peek into their source which is located here
~/Library/Application Support/Google/Chrome/Default
But maybe there is (wishful thinking) a good tutorial / set of practises on how to fiddle with gmail UI and functionality?
Gmail extension/gadget API - how to add a button to the compose toolbar?
You will have to create and inject the button programmatically. This will involve quite a bit of scouring the Gmail source code (spoiler: it's ugly).
How to build a chrome extension to add panel to gmail windows?
The greatest long-term challenge you will face is that gmail's layout will change unexpectedly and break email discovery or the modified UI. Both issues either require some cleverness to solve, or will require you to stay up at night wondering whether Google will suddenly break your extension.
http://www.jamesyu.org/2011/02/05/introducing-gmailr-an-unofficial-javscript-api-for-gmail/
They're all building out complex APIs with similar functionality, that can all break independently if Gmail decides to significantly change their app structure (which they inevitably will).
Gmail runs its code through the closure compiler, thereby obfuscating everything. On top of that, Gmail is probably one of the most sophisticated javascript apps out there.
Library by the founder of Parse - https://github.com/jamesyu/gmailr - but haven't updated in 1.5 years.
I can show you what I got so far, and just so know I don't particularly like selectors like .oh.J-Z-I.J-J5-Ji.T-I-ax7
Note: http://anurag-maher.blogspot.co.uk/2012/12/developing-google-chrome-extension-for.html (he also does it, he also uses such an obfuscated selectors)
manifest.json
"content_scripts": [
{
"matches": ["https://mail.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery-2.1.0.js", "myscript.js"]
}
]
myscript.js
var icon = jQuery(".oh.J-Z-I.J-J5-Ji.T-I-ax7")
var clone = icon.clone();
clone.attr("data-tooltip", "my tooltip");
clone.on("click", function() {
jQuery(".aDg").append("<p class='popup'>... sample content ...</p>");
});
icon.before(clone);
(reusing existing UI elements so my functionality looks natively)
https://developers.google.com/gmail/gadgets_overview
There are Sidebar Gadgets and Contextual Gadgets but they don not offer what I want to achieve.
Gmail Labs is a testing ground for experimental features that aren't quite ready for primetime. They may change, break or disappear at any time.
https://groups.google.com/forum/#!forum/gmail-labs-suggest-a-labs-feature
It seems like the ability to develop Gmail Labs is locked to Google employees.
https://developers.google.com/gmail/
Need help? Find us on Stack Overflow under the gmail tag.
So yes, I would really like to know if there are any tutorials / reference materials out there?
(I reviewed many of the 'Similar Questions' and I'm afraid that my options here are limited, but I would be extremely happy if I shrine your enlightenment upon me)

It looks like you haven't stumbled upon the gmail.js project. It provides a rich API allowing to work with Gmail. However, please note that this project isn't maintained by Google. This means that any changes in the Gmail may break your extension and there is no guarantee that anyone will care to update gmail.js to address these changes.

There is a nice API for interacting with the Gmail DOM here:
https://www.inboxsdk.com/docs/
The getting started example helps you add a button to the compose toolbar.
// Compose Button
InboxSDK.load('1.0', 'Your App Id Here').then((sdk) => {
sdk.Compose.registerComposeViewHandler((composeView) => {
composeView.addButton({
title: 'Your Title Here',
iconUrl: 'Your Icon URL Here',
onClick: (event) => {
event.composeView.insertTextIntoBodyAtCursor('This was added to the message body!')
}
})
})
})

Just ran into this blogpost from Square Engineering Team http://corner.squareup.com/2014/09/a-different-kind-of-scaling-problem.html
It is a chrome extension that displays contact information in the sidebar of Gmail when the user mouseover an email contact. (Just like Rapportive does)
The content script of the app is briefly described. It works as follow :
Check if the current page is an open email using document.location.href != currentUrl (you can also use gmail.js gmail.observe.on("open_email",function()) to achieve this).
Get the DOM element containing the email adress. I found out that this selector works for the sender : $(".acZ").find(".gD")
Insert the element in the sidebar with injectProfileWidget()
I am working on a similar extension that displays contact information pulled from Mixpanel here if you are interested.

Showing documents from Google Drive on webpage

Is it possible to show the documents from my drive on a webpage? I want the user to be able to click the document and download it, directly from my drive. How would I go about doing this? Thank you for your suggestions.

The fastest and easiest solution is to embed the folder using an iframe (no javascript needed). Obviously this is also the least flexible solution, although you can use CSS to change the layout of the iframe contents (see below).
Google Drive won't allow embedding of the url you would normally use. It has its X-Frame-Options header set to "SAMEORIGIN", preventing use in an iframe. So you have to use the following link, which will allow embedding:https://drive.google.com/embeddedfolderview?id=DOCUMENT_ID#VIEW_TYPE
DOCUMENT_ID is the id that is mentioned in the normal share link (which looks like https://drive.google.com/folderview?id=DOCUMENT_ID), so you can just copy that from there.
VIEW_TYPE should be either 'grid' or 'list', depending on your preference.
And if you need to change the style of the iframe content, take a look at this solution.

For HTML/JavaScript solution, look at the following links:
https://developers.google.com/drive/quickstart-js
https://www.youtube.com/watch?v=09geUJg11iA
https://developers.google.com/drive/web/auth/web-client
Here's the simplest way using JavaScript, most of the complexity is in
your WebApp authorization. The example below reads files IDs, names and description in a folder you specify.
- go to: https://cloud.google.com/console/project
and create a new project "xyz"
- Select "APIs & auth", disable the ones you don't need, enable "Drive API"
- Select "Credentials",
push "CREATE NEW CLIENT ID" button
x Web Application
Authorized Javascript origins: "https://googledrive.com/"
Authorized redirect URI: "https://googledrive.com/oauth2callback"
it will result in:
Client ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
Email address: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx#developer.gserviceaccount.com
Client secret: xxxxxxxxxxxxxxxxxxxx
Redirect URIs: https://googledrive.com/oauth2callback
Javascript Origins: https://googledrive.com/
- in the code below, replace
CLIENT_ID with xxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
FOLDER_ID with the ID you see in the folder address line,
https://drive.google.com/?tab=mo&authuser=0#folders/xxxxxxxxxxxxxxxxxxx
- run it, authorize
I don't know if you read JS, the code can be followed from bottom up, I made is as simple as possible.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var FOLDER_ID = '.xxxxxxxxxxxxxxxxxx'; // the folder files reside in
var CLIENT_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com';
var SCOPE = //'https://www.googleapis.com/auth/drive';
[
'https://www.googleapis.com/auth/drive',
'https://www.googleapis.com/auth/drive.file', // for description,
];
function rsvpCB(resp) {
var picAlbumLst = '<ul>\n';
for (i=0; i<resp.items.length; i++)
picAlbumLst += (
' <li>'+resp.items[i].id+', '+resp.items[i].title+', '+resp.items[i].description+'</li>\n');
picAlbumLst += "</ul>\n";
$('#container').append(picAlbumLst);
}
function rqstCB() { //test # https://developers.google.com/drive/v2/reference/files/list
var rv = gapi.client.drive.files.list({
'q': '"'+FOLDER_ID+'" in parents and trashed = false',
'fields' : 'items(id,title,description)' //'items(id,title,description,indexableText)'
}).execute(rsvpCB);
}
// authorization server reply
function onAuthResult(authResult) {
var authButton = document.getElementById('authorizeButton');
authButton.style.display = 'none';
if (authResult && !authResult.error) { // access token successfully retrieved
gapi.client.load('drive', 'v2', rqstCB);
} else { // no access token retrieved, force the authorization flow.
authButton.style.display = 'block';
authButton.onclick = function() {
checkAuth(false);
}
}
}
// check if the current user has authorized the application.
function checkAuth(bNow) {
gapi.auth.authorize({'client_id':CLIENT_ID, 'scope':SCOPE, 'immediate':bNow}, onAuthResult);
}
// called when the client library is loaded, look below
function onLoadCB() {
checkAuth(true);
}
</script>
<script src="https://apis.google.com/js/client.js?onload=onLoadCB"></script>
<body style="background-color: transparent;">
<input type="button" id="authorizeButton" style="display: none" value="Authorize" />
<div id="container">
</div>
</body>

This should be done with Google API. You can search google drive php api list files on google. And also I found this and this on SO.

Here are some main points:
Do you want anyone with the URL to be able to see your document? You can share a document as public to anyone on the internet. Plus you can set read access to specific folders. Just right click a Google Doc file, and choose 'Share' from the short cut menu.
I'm assuming you want people to download your docs, even when you are not signed in. This is called 'Offline Access', and is one of many terms you'll need to figure out in order to do all of this with a program.
If you only want to give read access to the user, using JavaScript, jQuery, etc on the front end is a viable option. You can also do this in PHP, it's just a matter of personal preference.
To do all of this in code, you need to grant authorization to read your files. The oAuth2 process has multiple steps, and it's good to understand the basic flow. Setting up the code and the webpages to initially grant authorization, then retrieve and store the tokens can get confusing.
Your Google Project has a setting for where the origin of the authorization request is coming from. That is your website. But if you want to develop and test locally, you can set the Javascript Origins to http://localhost
How much time do you have, and how much programming experience? Would it be easier to give the user a few lines of instruction to "Manually" download your file, rather than program the authorization check?
Putting the document into your webpage is the easy part.
In order to embed a Google doc in your website, go to your Google Drive, open a document and choose File then Publish to Web, and you will be given an HTML iFrame Tag that can be embedded into you web page. You can change the height and width of the iFrame to match the document size. iFrame Instructions W3Schools
Downloading your document can be done very easily from the online version of a shared document just by choosing FILE and then DOWNLOAD AS from the menu.
To get up and running fast, just give the user a couple lines of instructions on how to download "Manually", then see if you can program the code.
Provide a link to your shared document instead of programming the button, and then work on the code.
Search Git Hub for Google Drive, you might find something there.
Some of the official Google code examples are way more complicated than you need, and will take a long time to figure out. The code examples in the documentation pages are simpler, but are almost never complete functioning code examples. You'll need to put lots of pieces of the puzzle together to make it work.

Google Analytics: setting _trackPageview onLoad

Does anyone know why this:
$('document').ready(function(){
_gaq.push(['_trackPageview', '/my-custom-url']);
});
..wouldn't get picked up by GA?
We have an embedded service which displays different states of a page (same URL), depending on where the user is in the journey - hence the need to set a custom URL for each phase.

The code looks fine but without knowing your domain and seeing the GA set up script it's hard to guess.
I'd suggest installing the Google Analytics Debugger Chrome Extension. This might let you know if the gaq had any issues getting setup.