I'm trying to add data to each event I send in GA4 via javascript by using the 'set' command:
https://developers.google.com/tag-platform/gtagjs/reference#set
From those docs, it appears to be similar to Serilog Enrichment, but it doesn't appear to work and I don't see this data coming through.
I'm using localhost + Google Analytics Debugger chrome extension. Then in the Analytics > Configure > DebugView I see the custom event 'hello-world' and the property 'test', but I don't see the data I add via the "set" command.
GA DebugView
I use the set command for 2 calls - first is the "user_id" property that does work. That must be a special case, since GA treats that differently. The 2nd is for the custom object that doesn't work.
Console shows some output for both set command calls, but nothing to tell me that something has succeeded or failed
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SOMECODE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
window.dataLayer.push(arguments);
}
gtag('js', new Date());
// Set enrichment properties for every event "on this page"
// https://developers.google.com/tag-platform/gtagjs/reference#set
gtag('set', {
'foo': 'bar',
});
// Set the measurement id
// https://developers.google.com/analytics/devguides/collection/gtagjs/setting-values
gtag('config', 'G-SOMECODE');
//Set the GA4 user_id and keep it set for all events
gtag('set', {
'user_id': 'a24b935c-03cd-47f0-af68-c60a68b31303'
});
gtag('event', 'hello-world', {
'test': true
});
</script>
<title>Html Delivery</title>
<script type="text/javascript">
function myFunction() {
// Event with nested data test. It doesnt seem to display nicely
gtag('event', 'button-click-nested', {
'data': {
'type': 'nextButton'
}
});
gtag('event', 'button-click', {
'type': 'nextButton'
});
}
function LinkFunction() {
console.log("link click");
gtag('event', 'link click', {
'type': 'link'
});
}
</script>
</head>
<body>
<button onclick="myFunction()">Next</button>
<a id="myLink" href="#" title="Click to do something" onclick="LinkFunction()">link text</a>
</body>
</html>
I've tried to move the calls to above/below the config command, but it makes no difference either.
There is a similar question, but my rep wont let me comment on it to see if its still the case. The accepted answer doesn't really help me since I wanted to be able to add any arbitrary data in this way.
I have tried to setup a custom metric for this in GA (im not using GTM), but still. No data comes through.
Does this just not work?
Related
I'm working on a script that will refresh ads after 30 seconds of engaged on screen time. What I'd like to do is track in AdManager how these refreshed ads perform and how much they are adding to my bottom line.
I'd like to set up a key value like "reloaded" that has a true of false value indicating whether that impression was an initial load of the ad unit or a refreshed load after 30 seconds of engaged time.
I can't seem to figure out how to do this. It looks like you only have the option of setting key values at the page or ad unit level, not the impression. Anyone know how to achieve this?
Thanks!
You are able to add a key and an attached value to a specific slot before refreshing it. Then, you can use it after the slot refreshed. Below is the demonstration :
Step 1 : Page setup
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
</script>
<script>
var slots = {}
googletag.cmd.push(function() {
slots['banner'] = googletag.defineSlot('/adpath', [[728, 90]], 'banner').addService(googletag.pubads()).setTargeting('key1', 'value1');
googletag.pubads().enableSingleRequest();
googletag.pubads().setCentering(true);
googletag.pubads().collapseEmptyDivs(true);
googletag.enableServices();
});
</script>
<div id='banner'>
<script>
googletag.cmd.push(function() {
googletag.display('banner');
});
</script>
</div>
Step 2 : Check the attached key to the slot
//in your console
slots['banner'].getTargetingKeys()
//should log >> Array [ "key1" ]
Step 3 : add a new key in js
<script>
slots['banner'].setTargeting('reloaded','true')
</script>
Step 4 : reload the slot
<script>
googletag.pubads().refresh(slots[0])
</script>
Step 5 : Check the attached key to the slot
//in your console
slots['banner'].getTargetingKeys()
//should log >> Array [ "key1", "reloaded" ]
With this set up, you are able to identify / target the "reloaded = true" inventory within your Google Ad Manager interface.
Related documentation :
GPT setTargeting
GPT getTargetingKeys
GPT refresh
Hope this helps.
I am trying to set up an extension for firefox, chrome, safari and internet explorer, I am using crossrider.
Basically I want to display a browser action when clicked displays a popup containing an input text with the current page url and a button that will open a new tab to another url passing the url as a parameter.
Here is what I did based on what I found in the documentation ;
extension.js :
appAPI.ready(function($) {
appAPI.message.addListener(function(msg) {
if (msg.request === 'getUrl'){
appAPI.message.toPopup({url:location.href});
}
});
});
background.js :
var activeTabUrl;
appAPI.ready(function($) {
appAPI.browserAction.setResourceIcon('logo-19.jpg');
appAPI.browserAction.setBadgeText('extn', [255,0,0,125]);
appAPI.browserAction.setTitle('Add Url to Site');
appAPI.browserAction.setPopup({resourcePath:'pin.html', height: 300, width: 300});
});
pin.html :
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script type="text/javascript">
function crossriderMain($) {
activeTabUrl = null;
appAPI.message.addListener(function(msg) {
if (msg.url) {
activeTabUrl = msg.url;
$('#url').val(activeTabUrl);
if(activeTabUrl){
$('#addurl').prop('disabled', false);
}
}
});
appAPI.message.toActiveTab({request:'getUrl'});
$('#addurl').click(function(){
var fullUrl = 'http://my.site.com/addurl?url=' + activeTabUrl;
appAPI.openURL(fullUrl, "tab");
});
}
</script>
</head>
<body>
<input id="url" name="url" readonly="true" type="text"/>
<input id="addurl" type="submit" value="Add Url" disabled/ >
</body>
</html>
Sometimes the field containing the url is not filled, it does not happen on a specific page, for the same page, sometimes it will be displayed, sometimes not. I can't pinpoint a specific cause.
Am I doing something wrong ?
The code looks fine, other than a minor point of declaring activeTabUrl in the pin.html code and not the background.js code as they are different scopes.
From experience, the only thing I can think of that may be causing the issue is that sometimes browsers return the message response before the message listener has initialized. To mitigate this, in the pin.html code, add a delay to sending the message requesting the URL, as follows:
setTimeout(funtion() {
appAPI.message.toActiveTab({request:'getUrl'});
}, 0);
[Disclosure] I am a Crossrider employee
I am using jQuery 2.1.1, and have been using it to add 'clickable' to rows returned from a database using this:
<script type="text/javascript">
jQuery( function($) {
$('tbody tr[data-href]').addClass('clickable').click( function() {
window.location = $(this).attr('data-href');
});
});
</script>
That has been working fine. I have now added jquery-ias (2.1.2), and only the first page of returned results has clickable rows.
My jquery-ias code is as follows:
<script type="text/javascript">
$(document).ready(function() {
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '.wrap', // main container where data goes to append
item: '.item', // single items
pagination: '.nav', // page navigation
next: '.nav a', // next page selector
negativeMargin: 250,
});
});
</script>
Jquery-ias is working fine, the pages are loading as needed, but the resultant rows are not clickable.
Inspecting the page in Chrome shows that the subsequently loaded rows have not had the clickable attribute added.
The relevant row in the php is this:
<tr class='resultsrow item' <?php echo "data-href='carddetail.php?setabbrv={$row['setcode']}&number={$row['number']}&id={$row[1]}'"; ?>>
All works fine if I use either, but how do I get them to play nicely together?
EDIT.....
OK, I have worked around it using the jquery-ias built-in pageChange event.
jQuery.ias().on('pageChange', function(pageNum, scrollOffset, url) {
var delay=1000;
setTimeout(function(){
jQuery( function($) {
$('tbody tr[data-href]').addClass('clickable').click( function() {
window.location = $(this).attr('data-href');
});
});
},delay);
});
This way when ias finds a page change, it waits a second for the page structure to load, and then applies the clickable class.
I can't see this working if it's waiting for images though... doesn't have to for this instance, but there's got to be a better way to do this.
Any pointers?
the better way would be to use the rendered event, for example:
jQuery.ias().on('rendered', function(item) {
var $items = jQuery(items);
$items.each(function() {
jQuery('tr[data-href]', $this).addClass('clickable').click(function() {
window.location = $(this).attr('data-href');
});
});
});
I have a backend written in golang exposing /api/list interface. It returns lists when called from GET and create new list when it receive POST with parameters.
I can read it with standard core-ajax element, there is a huge amount of examples to do that.
What I didn't understood is what should I do, when I want to create new element through POST? I read the documentation and searched for sample code for half day, can you point me to right direction?
//
Ok, thanks for help, it was really only bad format of json I was sending. There is still dark cloud in my mind telling that I misunderstood something from conceptual view. Is this:
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-ajax/core-ajax.html">
<polymer-element name="channels-service" attributes="channels">
<template>
<style>
:host {
display: none;
}
</style>
<core-ajax id="ch_load"
auto
url="/api/list"
on-core-response="{{channelsLoaded}}"
handleAs="json">
</core-ajax>
<core-ajax id="ch_update"
url="/api/list"
on-core-response="{{channelsUpdated}}"
method="POST"
handleAs="json">
</core-ajax>
</template>
<script>
Polymer('channels-service', {
created: function() {
this.channels = [];
},
channelsLoaded: function() {
// Make a copy of the loaded data
this.channels = this.$.ch_load.response.slice(0);
},
newChannel: function(ch_name) {
// this.$.ch_update.body = "ch_name";
this.$.ch_update.body = '{"Name":"pitchalist2"}'
this.$.ch_update.go();
},
channelsUpdated: function() {
//window.log(this.$.ch_update.response.slice(0));
}
});
</script>
</polymer-element>
correctly written data layer? It looks very counterintuitive to me and in examples using local data storage it works way easier.
You can send a POST request by setting the method attribute (method="POST") and the body attribute (body='{"my":"data"}'). Indeed you need a second iron-ajax element for this request.
See the attributes section in the iron-ajax documentation.
I've followed this tutorial:
http://popcornjs.org/popcorn-101
Tutorial Code
<!doctype html>
<html>
<head>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<script>
// ensure the web page (DOM) has loaded
document.addEventListener("DOMContentLoaded", function () {
// Create a popcorn instance by calling Popcorn("#id-of-my-video")
var pop = Popcorn("#ourvideo");
// add a footnote at 2 seconds, and remove it at 6 seconds
pop.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "footnotediv"
});
// play the video right away
pop.play();
}, false);
</script>
</head>
<body>
<video height="180" width="300" id="ourvideo" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv">
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm">
</video>
<div id="footnotediv"></div>
</body>
</html>
And can run this locally.
In Firebug, I see the footnote div update from:
<div style="display: none;">Pop!</div>
to:
<div style="display: inline;">Pop!</div>
On a live site however, I am loading my page html from a MongoDB database via Ajax and the footnote display functionality doesn't seem to be working.
Thinking this might have something to do with needing to 're-initialise' after the content has loaded, I've added the popcorn.js functionality to a function called on click:
Function
<script>
function myPopcornFunction() {
var pop = Popcorn("#ourvideo");
pop.footnote({
start: 2,
end: 6,
text: "Pop!",
target: "footnotediv"
});
pop.play();
}
</script>
Call
$(document).on("click","a.video", function (e) {
// passing values to python script and returning results from database via getJSON()
myPopcornFunction();
});
This doesn't seem to have an effect.
No footnotediv content is loaded when the video plays.
The video is also not playing automatically.
It's hard to reproduce in jsFiddle with dynamic content, so is there a generic approach to ensuring popcorn works with dynamically loaded content?
Firebug Error on click
TypeError: k.media.addEventListener is not a function
It seems to have been a timing issue in that originally I had made a call to the myPopcornFunction() outside of the function which loaded the content (a getJSON() function). When I placed the call within the same block as the getJSON() function, things seemed to maintain their 'order' and popcorn could work correctly.
Before
$(document).on("click","a.video", function (e) {
$.getJSON("/path", {cid: my_variable, format: 'json'}, function(results){
$("#content_area").html("");
$("#content_area").append(results.content);
});
e.preventDefault();
myPopcornFunction(); // the call WAS here
});
After
$(document).on("click","a.video", function (e) {
$.getJSON("/path", {cid: my_variable, format: 'json'}, function(results){
$("#content_area").html("");
$("#content_area").append(results.content);
myPopcornFunction(); // the call is now HERE
});
e.preventDefault();
});
The myPopcornFunction() was the same as in the original post.