hi am trying to setup rules in DTM.
Below is my setup - no page load rules
Custom Event based rule
Direct call rules within custom code of above event based rule.
My expectation is not to fire site catalyst call on custom event based rule but fire only with direct call rules.
Actual result is:
When page is loaded even before firing event based rule- I see a site catalyst call is made 'SATELLITE: Adobe Analytics: tracked page view' I am pretty sure this is coming from scode within DTM but I dont want that to happen rather al my calls should be from direct call rules
Any thoughts?
Add return false; to your custom page code within the tool setup. This will prevent the default page view from getting called.
There are a few ways to do this. The easiest is to configure the Adobe Analytics section your event-based rule to not send a request:
Adobe Analytics Section - tracking disabled
And then call the DC rule via a third-party JS tag in your rule:
_satellite.track('MY_RULE_NAME')
If for some reason you're firing a page view on event activity (using other rules in the property) you may consider setting a data element when your event-based rule triggers and then in your custom Adobe Analytics configuration abort the analytics call.
if(_satellite.getVar('MY_EVENT_BASED_RULE_FIRED')
{
s.abort = true;
}
Hope this helps.
Thanks for your valuable inputs!!
I could very much suppress the event based and other direct call rules but my major issue was to suppress the initial SC call with page load (happening from DTM library).
But I could achieve that based on the hostname - I am returning false when my first rule is event based rule.
Related
I am trying to implement conversions API on our page and of course the main issue is the deduplication of events. The way I avoid this, is using same event names and same event IDs (random unique variable generated at specific time). As I understand it, Google Tag Manager (GTM) will fire tags when certain conditions are met (for example page load), and send the events to the pixel. I am trying to send the same event from our page's javascript. For the simplicity's sake, I started with the 'pageView' event.
I am trying to achieve all of this with only Tag Manager and our code (not using Google's Tag Manager Server-side option)
I've implemented some methods to try get the dataLayer variable (I defined a new one, called EventID), but I see that the value is stored in the dataLayer when the page loads - however, when checking my events, it shows that event id is undefined (the value of the dataLayer's EventID variable was not yet set at the time when my function was called. So events are sent with 'undefined' eventID's, but when I open dev console and check the dataLayer variable the expected random eventID number is there.
I've also added a new tag called "datalayer Event ID" which is supposed to fire when page loads and store the newly generated event id to dataLayer where it can get fetched. The code is simple and it looks like this:
<script>
ID = [our FB Pixel ID] + Date.now();
dataLayer.push({'eventID' : ID});
</script>
Could someone with more experience please comment on this:
Is this way of doing it correct? Am I missing some triggers/should define different time/place when this tag should fire?
Is there a different approach I should take to implement the deduplication?
Thanks for any info!
Just pushing eventID to dataLayer will change nothing in your case.
You need to change the configuration of the FB tag itself.
Not sure why you don't want to use sGTM because looks like this is the easiest option for you.
Here is a good blog post on how to set up Facebook event deduplication in Google Tag Manager
i am embedding a form on a checkout page with an iframe and i am trying to take the price of the cart and have it automatically inputted into the amount field. the value of the cart variable seems to be $("span[data-test='cart-price-value']").innerText;
when i check it in the console, but i am confused on whether i should set the variable in the script that embeds the iframe or in my iframe html itself or whether or not i have to do both and add a jquery listener to the iframe html
and also i need to trim off the '$' from the variable, cause
$("span[data-test='cart-price-value']").innerText; returns a value with a dollar sign in front of it for example "$435.66" and i need it to be just "435.66" any help would be appreciated
There are a few things here -
Browsers have some pretty stringent restrictions about cross-origin iframes. You won't be able to communicate between the BigCommerce Checkout on one URL to an iframe hosted on a different URL - if their origins are different.
If you try to use JavaScript from the BC checkout page to set the value of a form input embedded in the iframe, you'll get a security warning in the console and the browser will dissallow it.
However, there is an API which allows for this communication - you can read more here:
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
You're going to be sending and listening for custom "message" events and running code accordingly.
I'm not 100% on this, but from what it sounds like, you'll want to use Window.postMessage() to the iframe/origin hosting the external form, and send along the price you need to input.
On the page which serves the iframe/form code, you'll need an event listener to wait for this message to come in, and that's when you can have an event handler which will take the value passed along in the cross-origin message and modify the form input value.
Now, in terms of actually implementing this - it will also become more complicated depending on what type of Checkout Page you're hosting. Are you on Optimized One Page Checkout (The new one?) If so, you'll probably need Mutation Listeners, as the OPC is an external React Application, and you can't really hook into the internal state, you need to use mutation listeners to wait until each section (Customer Details, Shipping Details, Billing Details, payment Step) loads - as these are refreshed using internal React State which you can't access from the BC/stencil/cornerstone/blueprint scripts.
More details on that here:
https://medium.com/bigcommerce-developer-blog/the-complete-guide-to-checkout-customization-on-bigcommerce-6b566bc36fa9
If you're using an older version of checkout where you can manually modify the JS and HTML structure of the checkout that BC serves, you might not need this.
I am working on a hybrid application in which login page is written in php and rest application is written on react. I want to implement google analytics for the same SPAs. I am pushing data layer in componentWillMount and my gtm script is being added via php code in index.php file.
The problem that I am facing is on first time and whenever page is transitioning from non-react to react pages, my GTM layer is not pushing data into gtm. if move with in react pages, everything is working fine.
Any help is highly appreciated.
Thanks
The problem you are facing is very common when using SPAs.
Let me give you an example:
When you move from https://digitalmarketingbloq.com to
https://digitalmarketingbloq.com/2018/08/07/how-to-filter-internal-traffic-in-google-analytics-with-google-tag-manager/
The browser communicates with the server. The page is being rendered
and GTM gets initiated.
In your example on the first-page view of
your SPA, it works fine because the communication with the server is established
. But in an SPA moving from one page to the other
happens, client side. Do GTM does not have anything to act upon.
How can you solve this?
The first option is to enable the built-in variables in the "History" (Variables > Configure > History) section:
Second, create a trigger (Triggers > New > History Change) that fires on all History changes:
In preview mode, you can check if your SPA pick up on history changes. Read more information about the variables here: https://support.google.com/tagmanager/answer/7182738?hl=en&ref_topic=7182737#history and about the trigger here https://support.google.com/tagmanager/answer/7679322?hl=en.
If that doesn't work you need to develop "virtual page view" events in the SPA when transitions are completed. Let me give you some more perspective. When a transition from page A to page B is completed fire the following event:
dataLayer.push({
'virtualPageTitle': 'My Login Screen',
'virtualPageURL': 'https://www.my-example/login',
'event': 'VirtualPageview'
});
The above will push virtualPageTitle and virtualPageURL to the dataLayer as and event VirtualPageview. GTM will be able to pick this up but you need to create 2 user-defined variables virtualPageTitle and virtualPageURL. The trigger will be VirtualPageview.
Hopefully, this clarifies things for you.
After a user fills in my "new" user form on "example-one.com", the "create" controller creates the record in the db. Then it does a redirect_to to an external site "payment-checkout.com". I have setup the Google Analytics code on both sites.
Google provides two functions _link and _linkByPost for use to use in any links or forms that go to your external domains. The problem is the user is being redirected by the controller action outside of the view and I cant use those two javascript functions to pass on the relevent G.A. info - what do i do?
Can anyone help?
The way _link works is by passing the Google Analytics cookies from your first domain via a query string to your second domain. The second domain, if configured correctly, will accept those URL parameters and apply them as cookie values for the purposes of tracking.
So, it shouldn't be difficult for you to apply your own version of the _link function.
Specifically, the _link function passes the following cookies:
__utma, __utmb, __utmc, __utmx, __utmz, __utmv and __utmk
Into a query string as such: ?__utma=87278922.614105561.1288923931.1294376393.1298325957.6&__utmb=87278922.1.10.1298325957&__utmc=87278922&__utmx=-&__utmz=87278922.1288923931.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)&__utmv=-&__utmk=72493274
So, all you need to do to replicate the _link function is, before you apply the server side redirect, grab the cookie values, and apply them as a query string on the URL you're redirecting to.
Now, that's not the only thing you'll need to do to get this working. The Google Analytics configuration on the payment site will need to be configured with _setAllowLinker set to true, as well as potentially disabling the domain hash and setting a particular domain name for the tracking cookies; it depends on your configuration. You can find out more about that in Google Analytics Cross Domain Tracking Guide.
#yc's approach looks like the best bet but if that doesn't work, I would suggest having your controller redirect the user to a "temp" page on your site itself and show some text like "Checking out....Please wait..." and using Javascript trigger the call to the "_link" function to redirect the user to the "payment-checkout.com" (again using Javascript).
I assume you're also tracking the page the user returns to and want to measure how many users you lose in the process in between?
My knowledge of the Google Analytics API is fairly limited, so maybe there's a better solution, but you could consider rendering a page containing the GA code and triggering the _link() function from there?
It might also be possible to perform an AJAX call on submitting the form (maybe using remote_form_for) and handling the GA redirect in an RJS-response:
page << "_gaq.push(['_link', 'http://example.com/test.html']);"
However, I'm not sure how well that would fit into your application.
When using javascript to assign onclick handlers to HTML <a> tags, I have a specific question when it comes to the use of Ajax - what's the best way to get the URL to the ajax request? Should I use this.href or code it into the handler function itself?
Consider the following link:
<a id="link" href="http://mysite.com/getData.php">Get Data</a>
Then, the javascript:
document.getElementById('link').onclick = function() {
// Send ajax request
}
I like using this.href inside the handler but I'm worried about a user who clicks the link before domready fires and the links are activated. Is it better to use href="javascript:void(0);" in the HTML and then construct the URL in the handler itself? This way, the link would do nothing unless it's activated. What's the best-practice here?
Thanks, Brian
Think about it from this perspective: how would your page architecture hold up if no JS was enabled?
Your application should be responsive to user input under any circumstances, and should not rely on implicit assumptions about whether users will have Javascript-enabled browsers. Sounds ridiculous, right? Well, I have plenty of clients who work for huge corps where the desktop configs are all locked down, so everyone's running IE6 with some incredibly strict settings.
Therefore, the href attribute of your anchor tag should point to the location where you want users to go if they do not have Javascript enabled (you should have a fall-back in place for your AJAX functionality that will basically do the same thing). In your onclick handler you should specify the URI for the AJAX call.
When it's all said and done, users who have JS enabled (which will be the majority) will hit your onclick handler in which you have the URI for your AJAX XHR call, and users who do not have JS enabled will be redirected to another page that achieves an equivalent result.