Pass Information from Cookie into Drift Custom Attribute - javascript

I need a little help.
I am trying to pass data from a Cookie inside of GTM to a custom attribute inside of Drift.
I've tried following this documentation, but can't seem to get it to work:
https://devdocs.drift.com/docs/contact-properties
This is the code that I have tried using inside of Google Tag Manager:
drift.on('ready', function() {
drift.api.setUserAttributes({
gclid: '{{cookie - gclid}}'
})
})
I am not very familiar with coding, so I am sure there is some error on my end. Any help would be appreciated.

It's quite challenging to help without knowing what the errors are, but I'll do my best.
The issue is most likely related to either the Drift integration failing to initialize or an error related to accessing the cookie. The best way to solve your issue would be to isolate where the problem lies.
Focussing on Drift, are you sure that Drift has been initialized correctly?
According to the documentation, a custom Drift attribute will be visible in the Custom attributes tab in your contact settings.
You can test this by running the following code snippet in the browser console for the website in question and then checking the Custom attributes tab to check that the test attribute has been created.
drift.on('ready', function() {drift.api.setUserAttributes({test: 'tester',})})
Note that Drift does not initialize when running a website locally so make sure that you're testing with a site that's deployed to a server.
If the above works then we know that Drift is working as expected and the issue relates to how you're accessing the cookie so you'll want to focus on that.
In either case, if you could share your error, it would be very helpful.

Related

Code in Google Tag Manager does not working

I have a test tasks and 2 from 3 I've done.
But this one I don't understand how and what I need to do?!
I managed to find syntax error:
At first should be:
...function someFunctionName() {...}
or
(function() {...})()
...second it's anonymous function...
TASK:
This script is executed in GTM and implemented in Google analytics by custom Task.
The script sends information about user behavior to Optimozg server and then to Bigquery (bq.php file processes and forwards data). Optimozg server data is coming in correctly, but the data in Google Analytics does not reach.
What is the reason?
How do you fix it?
Hint:
(test the code on your site instance with GTM)
function(){return function(tracker){if("undefined"===typeof tracker.get("BigQueryStreaming")){var f=tracker.get("sendHitTask"),h=function(){function d(c){var a=!1;try{document.createElement("img").src=e(!0)+"?"+c,a=!0}catch(k){}
return a}
function e(c){var a="https://test.optimozg.com/bq/bq-test.php";c||(a+="?tid="+encodeURIComponent(tracker.get("trackingId")));return a}
return{send:function(c){var a;if(!(a=2036>=c.length&&d(c))){a=!1;try{a=navigator.sendBeacon&&navigator.sendBeacon(e(),c)}catch(g){}}
if(!a){a=!1;var b;try{window.XMLHttpRequest&&"withCredentials" in(b=new XMLHttpRequest)&&(b.open("POST",e(),!0),b.setRequestHeader("Content-Type","text/plain"),b.send(c),a=!0)}catch(g){}}
return a||d(c)}}}();tracker.set("sendHitTask",function(d){h.send(d.get("hitPayload"));tracker.set("BigQueryStreaming",!0)})}}}
Not sure why JS devs should know anything about GTM. They typically don't go there.
But yes, to understand how to use the given code properly, just read this article: https://www.simoahava.com/analytics/customtask-the-guide/ it describes what custom tasks are and how to use them.
Ok, so first make a GTM account. Deploy the GTM code on your site. May as well use a local site. Or, rather, have the GTM code being injected by a local extension to a random site that doesn't have GTM yet. Or maybe use a redirector extension to redirect the request for their GTM to yours, up to you.
After that, you just make a tag in GTM that would send a Universal Analytics pageview. GA4 decided not to bother with custom tasks, unfortunately, so UA only. Then you make a trigger on pageview. You assign the trigger to the tag. Don't forget to publish the workspace at least once for it to be testable. Then you preview. Preview is a CTA in GTM in top right corner, near the publish. Basically a neat GTM debugger. Enter the site where you have your GTM snippet deployed/injected. Make sure preview sees your tag firing on page load. That would mean you did the preparation correctly.
We're doing the Hint section here, by the way. Now you need to make a custom javascript variable in GTM, paste the code snippet as is in there. The reason why it wants the code in an anonymous function is because it will run it as a closure on it's own. So they kinda remove the need of the extra ()(). It's mostly done for people who don't know JS, so don't be surprised.
Ok, you've made the CJS var, now go to your tag, and set your customTag exactly as Simo shows in his article:
Good, now publish your container, go to the site where you have it deployed, open the network tab and reload the page.
Inspect the calls to the BQ and Optimozg endpoints. Now what they ask is, I believe, why the original call that is meant to be sent by the tag is not being send. So if you remove the setting of the customTask, then publish and reload the page, you should see a request to the collect endpoint, which is the GA's endpoint for data tracking. If you re-add the customTask code, it will prevent the normal tag's functionality from execution, so no collect call.
What they want to hear from you is how to make the tag fire the original event alongside their optimozg and bq calls.
Most likely, the answer is pretty simple and elegant, but requires a lot of debugging to reach to. Reading Simo's article will help understanding the significance of setting various tasks.
Uh, ok, I didn't mean to really debug it, but it looks like I found the bug. It's in the var f = tracker.get("sendHitTask") It's being used to store the original sendHitTask function, but it never gets used. Why is that? Basically, you just need to call the function in the new sendHitTask function that you set in the last line. I'm not going to debug it in my GTM, but I'm pretty sure that's the issue. It's kinda begging to be found there.
Also, this is not quite a junior JS dev task. It's a senior tracking implementation task. Basically, about $110/hr in Canada and US. Junior JS devs are around $35/hr, I guess. They're just trying to save money, heh. I was thinking of hiring junior JS devs instead of tracking implementators too, but it's hard to teach how data analysis works in all the different tools.

Google Tag Manager and Single Page APP: How to read a DOM Element?

I want to create a variable on my GTM to store a DOM element. I've tried a custom javascript, for example:
function(){
return document.querySelector('.room__price-value').innerText;
}
But nothing, on GTM preview I see always NULL. I think the issue was the single page app.
And I can't involve the programmers.
Any suggestions?
Thanks
Make sure that when in preview, you check the value of your variable on every event on the left.
Make sure when you execute document.querySelector('.room__price-value').innerText; in your console, you actually get the result you're expecting.
Change the code until you get the result in the local console.
Make sure your timing is good, as Eike mentioned in the comment.
What you're doing there seems right. That's pretty much how you do DOM scrape in GTM when front-end devs aren't available. If the suggestions still don't work for you, give us more info on what you're doing, on how your DOM looks like, what your debugging showed and such. As much potentially useful context as you can.

How to load Component and its Classes in my website

I am trying to over ride one the notification popups of browser using the following code:
var branch = Components.classes["#mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
But in Mozilla Firefox, I get the error Component.classes is undefined.
And in Chrome Browser, I get the error Component is undefined.
Well I have realised I need to include something in my website. But I am unable to find exactly what is required.
Please anybody help. I googled about it a lot, but I have never used this thing before(the Classes) and I am unable to search what will help me out. i dont even have any idea that what will be the tags for this thing. I have never used Component or its classes
My website is in ZF2.
Components Object is non-standard feature. See https://developer.mozilla.org/en/docs/Components_object.
It also says
Warning: This object is only intended for code running with chrome
privileges. Exposing the object to regular web code was a mistake.

Programatically retrieve count of javascript errors on page

I'd like to write a test case (using Selenium, but not the point of this question) to validate that my web application has no script errors\warnings or unhanded exceptions at certain points in time (like after initializing a major library).
This information can easily be seen in the debug consoles of most browsers. Is it possible to execute a javascript statement to get this information programatically?
It's okay if it's different for each browser, I can deal with that.
not so far read about your issue (as far as I understood your problem) here
The idea be the following:
I found, however, that I was often getting JavaScript errors when the page first loaded (because I was working on the JS and was introducing errors), so I was looking for a quick way to add an assert to my test to check whether any JS errors occurred. After some Googling I came to the conclusion that there is nothing built into Selenium to support this, but there are a number of hacks that can be used to accomplish it. I'm going to describe one of them here. Let me state again, for the record, that this is pretty hacky. I'd love to hear from others who may have better solutions.
I simply add a script to my page that will catch any JS errors by intercepting the window.onerror event:
<script type="text/javascript">
window.onerror=function(msg){
$("body").attr("JSError",msg);
}
</script>
This will cause an attribute called JSError with a value corresponding to the JavaScript error message to be added to the body tag of my document if a JavaScript error occurs. Note that I'm using jQuery to do this, so this specific example won't work if jQuery fails to load. Then, in my Selenium test, I just use the command assertElementNotPresent with a target of //body[#JSError]. Now, if any JavaScript errors occur on the page my test will fail and I'll know I have to address them first. If, for some strange reason, I want to check for a particular JavaScript error, I could use the assertElementPresent command with a target of //body[#JSError='the error message'].
Hope this fresh idea helps you :)
try {
//code
} catch(exception) {
//send ajax request: exception.message, exception.stack, etc.
}
More info - MDN Documentation

flowplayer html validation

Ok, Im trying to rebuild a clients website thats long over due for cleanup on the backend and under the hood. This client uses flowplayer for most of the videos seen on any of there sites, and while attempting to validate my code via w3c validator I notice that the validator is throwing 2 errors both pertaining to flowplayer in this case.
http://validator.w3.org/check?uri=http%3A%2F%2Fv2.newyorkbarshow.com%2Fhome&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3
I am using the latest flowplayer out, and following there example (which I don't know if that validates either). So I am wondering if it doesn't validate out of the box, if anyone happens to know a means of correcting it so it will validate.
You need to add data attribute with value "/static/imgs/static/VidAd4BarShow.swf" in your object tag.
note : I see this happens before flow player executes anything within your source...

Categories