I have implemented AMP analytics and a couple of events, it's working fine but I'm wondering how I could capture the destination of a clicked link.
If I have a link like this:
<a rel="nofollow,noopener" data-item="ShopName" data-product="ProductName" class="link-price" target="_blank" href="ShopURL">ShopName</a>
I track it like this:
"article prices":
{
"on": "click",
"selector": ".link-price",
"request": "event",
"vars":
{
"eventCategory": "Prices",
"eventAction": "<I WOULD LIKE SHOPNAME HERE",
"eventLabel": "<I WOULD LIKE PRODUCTNAME HERE>"
}
}
I would be tempted to put some javascript in there but javascript is not allowed.
Is there any possibility to track data attributes and urls?
Use data attributes in HTML:
data-vars-my-label="ProductName1"
and your config JSON:
"vars": {
"event_label": "${myLabel}",
...
See https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/analytics-vars.md
Related
I have implemented tracking on my first AMP site and global tracking is working well but I haven't found a solution to track clicks on specific CSS classes.
For unique selectors like id="my_unique_name", I use the following:
"price click":
{
"on": "click",
"selector": "#my_unique_name",
"request": "event",
"vars":
{
"eventCategory": "Activity",
"eventAction": "Price button"
}
}
This works fine.
Now if I try to capture clicks on something like this: class="my_class" it doesn't work. I have tried the following possibilities:
"selector": "div.my_class"
"selector": ".my_class"
"selector": "my_class"
Is there a way to track clicks based on CSS classes?
Thanks
Laurent
I tried to record a flow for my website using tag assistance extension, but it seems that it doesn't work with AMP analytics.
Could anyone help me or suggest any similar tool to do this record.
i'm trying to test if google analytics filter "to block our internal traffic" work or not. cause i tested it in google analytics and it seems that the traffic goes to the real time.
I found a solution for my problem
- we just need to send something like this
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y",
"anonymizeIP": ""
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
-We should send "anonymizeIP": "" to make google pick up the user ip and then the filter will work.
I'm currently giving google map static a long/lat for the location.
Is it possible to display the image of google map static on the conversation?
Thanks
You won't be able to display it in the "Try it out" UI, but if you deploy your own application you can.
In your input node you can put the following line of text:
<img src="https://maps.googleapis.com/maps/api/staticmap?center=$long,$lat&zoom=11&size=200x200&sensor=false">
Then create a context variable long and lat. For example (placed in Welcome node).
{
"context": {
"lat": 55.27088,
"long": 25.2048
},
"output": {
"text": {
"values": [
"Hello. How can I help you?"
],
"selection_policy": "sequential"
}
}
}
Your previous line will be translated to this:
<img src="https://maps.googleapis.com/maps/api/staticmap?center=25.2048,55.27088&zoom=11&size=200x200&sensor=false">
Which will render:
The solution above will allow you to render in the conversation simple application.
Another option is to pass the lat/long as context variables to your application, and let it render. It will give you more control of how the map is rendered.
The following link will show what options you have for google maps.
https://developers.google.com/maps/web/
Is this the correct coding to add into my Google AMP article? I tried to submit to Google AMP and there is no error but the article will not come out in the Google Analytics when I browse my article from my handphone.
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXX"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview",
"vars": {
"title" : "GAMP-"+ "Title of my page"
}
}
}
}
</script>
</amp-analytics>
Please refer to documentation available at
Google amp-analytics documentation
You will need to include the script reference in the head of your html document. Your whole amp html page will need to be validated as well. I suggest going through the starting documentation to create your first google-amp validated page and then add the analytics. Find that guide here
Hello World Google-amp
I have a contentscript that essentially does a console.log to indicate that it has been injected into a page, and my manifest.json has all_frames set to true.
As a result, if I go to http://www.reddit.com/r/videos I see a message per frame and if I click on a video, I will also see a message coming from a script injected into the video's iframe. This indicates to me that if the page is dynamically modified to include an iframe, the contentscript will be injected into it.
When I go to http://www.html5video.org, I only get a message from one frame, but if I look at the DOM I see that there is an iframe for the video so I would expect my contentscript to be injected into it, but it is not.
My ultimate goal is to get a selector for the video on the page and I would expect to be able to do so by injecting code that looks for it into the iframe.
Help is appreciated.
I suspect that Chrome will inject your content scripts into an IFRAME that is part of the original page source which is the case with the reddit.com example - the IFRAMEs are part of the original page so Chrome can and will inject into those. For the html5video link the IFRAME is not part of the original source. However, if you inspect the elements you can see the IFRAME which suggests to me that the IFRAME has been dynamically loaded to the DOM. I see the same behaviour with an extension I have written so it seems consistent.
If you need to inject into the IFRAME then perhaps you can hook the DOM creation event and take the action you require:
document.addEventListener('DOMNodeInserted', onNodeInserted, false);
UPDATE:
What about this for http://html5video.org/ - using the following content_script code I can get the IFRAME and then VIDEO tag. Note: This approach/concept should also work pretty well too for Reddit.
content_script.js
console.log("content script for: " + document.title);
var timer;
document.addEventListener('DOMNodeInserted', onNodeInserted, false);
function onNodeInserted(e)
{
if(timer) clearTimeout(timer);
timer = setTimeout("doSomething()", 250);
}
function doSomething()
{
$media = $(".mwEmbedKalturaIframe");
console.log($media);
$video = $media.contents().find("video");
console.log($video);
}
manifest.json
{
// Required
"name": "Foo Extension",
"version": "0.0.1",
// Recommended
"description": "A plain text description",
"icons": { "48": "foo.png" },
//"default_locale": "en",
// Pick one (or none)
"browser_action": {
"default_icon": "Foo.png", // optional
"default_title": "Foo Extension" // optional; shown in tooltip
},
"permissions": [ "http://*/", "https://*/", "tabs" ],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["jquery-1.7.1.min.js", "content_script.js" ],
"run_at": "document_idle",
"all_frames": true
}
]
}
See also: jQuery/JavaScript: accessing contents of an iframe