Add FB pixel event code into button - Squarespace - javascript

I am new to squarespace.
My client wants to track the page views for this, I have injected Base pixel code to header of all pages and it worked perfect,
But now she wants to track , if the user click on any buy button on this page
I have no idea how to inject facebook pixel code to a button in squarespace, any idea or reference would be highly appreciated .
Thanks

It sounds like what you want to do is add an "Event Code" either:
A) to the page that the user sees after clicking the button, or
B) to the button itself.
If you're going with the prior option (A), then you'd want to make sure that the page upon which the user lands does in fact indicate the event you're tracking and that users do not arrive to that page for any other purpose. That is why I would lean towards the latter option (B).
You can read more about adding an event code here, and here, but in summary:
Events are actions that happen on your website, either as a result of
Facebook ads (paid) or organic reach (unpaid). The event code lets you
track those actions and leverage them in advertising.
There are two types of events you can send:
Standard events. 9 events we're able to track and optimize your ads for without any additional actions...
Custom events. Actions that are important to your business, but that you can’t use for tracking and optimization without additional action...
...
If you were to consider these buttons to be an "Add to Cart" type-of-action, then you'd use the AddToCart event. To do so, you could use Javascript similar to the following:
<script>
window.Squarespace.onInitialize(Y, function() {
var btns = document.getElementsByClassName("sqs-block-button-element");
var i;
for (i=btns.length-1; i>=0; i--) {
btns[i].addEventListener("click", function() {
fbq("track", "AddToCart");
});
}
});
</script>
You could inject this code using per-page code injection or via site-wide code injection. I would recommend the prior, otherwise all buttons on your site will execute the fbq event code, which is probably undesirable.
Regardless of whether you use site-wide or per-page injection, you may want to better target the buttons using a more specific selector. For example, you could use querySelectorAll and target by href attribute. However, if you use per-page injection, the code I supplied should work; it will apply it to every button on that page.

Related

How to trigger the onclick function by code by writing an javascript extension?

There's this website that logs me off if I don't click a button in a form that periodically pops up. I'd like to write a script to automate this.
What's the phrase that describes such web task automation?
How do I detect such pop up?
How do I trigger the onclick function in that form via code?
Usually, all you need is to be able to identify a unique selector for the element. When you see the button appear, right-click it and Inspect it in the Elements panel of your browser. Look for something that makes it unique, such as an ID, or a class (that no other button has), or being a descendant of a similar unique container.
For example, the "Post Your Answer" button on Stack Exchange has an ID of submit-button, so you can select it with #select-button:
Once you have the selector, either periodically check for it in an interval, or use MutationObserver (more complicated and more expensive, but it'll click the button ASAP, and doesn't require polling). Whenever the element exists, .click() it.
setInterval(() => {
const elm = document.querySelector('#my-btn');
if (elm) {
elm.click();
}
}, 1000);
You might find it easier to put this code into a userscript rather than a standalone Chrome extension - userscripts are far easier to manage IMO, all you need to do is type the Javascript and it's ready to go.
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
You can use MutationObserver for particular HTML tag/element which renders every time when the pop-up is shown. Once you got the DOM element, click the required button to remain logged in into the website.
Make the automation script for the same.

Google tag manager single page app get element on history change

I have created a few variables for custom dimension on pageviews.
Pageview trigger: windowload or history change
The data is being pushed through, but it's only getting previous pages'
for example,
page/1 div class "page date" is 25th Jul, I would get undefined, but
when I click onto page/2, i would get the page/1's "page date"
function() {
return window.document.getElementsByClassName('page date')[0].innerText;
}
It seems that the history event is triggered before the corresponding page content is loaded into the DOM. This is nothing you can blame GTM for (GTM sees a history change, inspects the DOM, and grabs whatever it finds there, and that's the normal/expected behaviour).
Your solutions:
Make sure content is updated in DOM BEFORE the history event is triggered: this is something to sort out on the application side, and that may not be easily changed (if you use a framework like react it's probably best if you don't start hacking its core behaviour).
Delay the history event triggers: have a look at this solution which describes how to achieve this. Please note that solutions based on delays are never 100% reliable because there's a race condition between your delay and the loading of content, and you don't know for sure who will come first (and increasing the delay too much can cause the side effect of users changing pages in quick successions before analytics had a change to capture them).
Detect DOM changes: a more robust alternative would be to monitor the DOM for a particular element that is unique to each page (eg a <meta> element with the page ID or URL). You could use a tag to initiate the monitoring of this element when you receive the history change, and when the element actually changes it means the DOM has been updated, and you could fire your own trigger. This could be done via the MutationObserver or using a setInterval/setTimeout loop to check manually. However if the DOM is changed in several phases (blocks by blocks) this would not work (your <meta> element would have changed but not the div you're looking for), requiring you to start monitoring on a per-element or per-block level, which will be quite some work.
Push a dataLayer from your application: this would be my preferred option. I would hook into the logic of your application (you should be able to extend the routing method or the app framework should give you event listeners you can bind a custom function of yours with in which you can tell GTM that the page has been changed (eg dataLayer.push({'event': 'page_changed'});)

Single Page Application Issues

I'm creating a single page application by loading HTML pages inside div element on button click events.
For example :
function loadHome(){
document.getElementById("home-pane").innerHTML='<object type="text/html" data="pages/home.html"></object>';
$("#about-pane").hide();
$("#blog-pane").hide();
$("#forum-pane").hide();
$("#contact-pane").hide();
$("#home-pane").show();
};
Because of it, the URL of application will not change. I'm afraid I would not qualify for Google Ads in case of Single Page Application. Please suggest me an alternative solution so that I would be able to generate different URLs on different click events (Home, About, Contact, Blog etc.) and would able to access those pages via separate links.
I'm kind of new to all these stuff, but I would love to implement all your suggestions and make an extra source of income.
As suggested by #Rory in the comments, you can use the History API
What I would do is, in onclick, just pushState a new URL to the history
Then attach a listener that fires whenever the URL changes. That listener would look at the URL and decide based on it, which 'page' to render.

Change links before or when clicked? GA Cross-domain tracking

I have a situation where I have to manually decorate a specific link across my entire website with the Google Analytics linkerParam.
This is to pass the GA client ID from my main site over to my ecommerce site in order to maintain the session.
Normally this would occur automatically through the auto linker settings but there is a server-side redirect page that sits between my site and the ecommerce site.
That redirect page would pass along the GA client ID but it's never given a chance because it's a page on my domain and not the external domain. Auto linker won't work in that situation which is why I need to manually do it myself.
The solution that I've been given basically adds a javascript addEventListener to each link to the redirect page.
That solution does work.
Is it better to use the addEventListener for when people actually click on the specific link to only then decorate that link with the linkerParam?
Or is it better to simply modify each link when the page initially loads?
Thanks
In my custom linkers I decorate the link only after is has been clicked. My reasons (which you may or may not find convincing) are:
if a user hovers over a link I do not want him to see an attached client id
since search engines now execute javascript they might index decorated links
I can decorate links only after they are actually on the page (but I can attach a callback function to links that are created after the fact), so if a user leaves before DOM ready the link is not decorated
On a page with lot's of links decorating all of them actually takes some time and performance for something that I do not really need (after all I only need the clicked link decorated)
As to Ithans comment above (where I think he referred to the DOM rather than the sinister sounding "doom"), since the user leaves the page in any case after clicking the link (you would not decorate in-page linking), so multiple DOM operations are not an issue.
You can change all the links when the page load
something like
var linksToChange = document.querySelectorAll('.theLinkClass');
for (var item of linksToChange ) {
item.href= "http://google.es";
};

How to intercept button click, run analytics code, and then continue with click function

I have been asked to build code where I can intercept the click of a button, stop the function that fires on the click, run an analytics script, then fire the original click function. I can do this with JS/jQuery on a standard button when using onClick, but this button is built in Angular and using an ng-click instead, so I am a little out of my element.
The button I am trying to intercept is this:
<input id="btn-hero-form-try" class="btn btn-solid" data-ng-disabled="trialForm.buttonDisabled" data-ng-click="trialForm.submitTrialForm('personal')" type="submit" value="Download Free Trial">
A few things make this more difficult: I have no access to the HTML code on the CMS, so I can't add any additional parameters that way, and have been asked not to inject any via script from the page.
I have been playing with the ng-click-interceptor, but have not gotten it to work yet.
Any help, or pointing in the right direction would be greatly appreciated.
You are free to upgrade common directive ngClick - just create your own!
In common words - they share same event but called separately.
It will not affect default, it will be called later so you need to mess with priority, and you will be needed to append it to existing application.
If you are aware of changing existing code - then you need jQuery, selector like [ngClick] to find any clickable item and run asynchronous .on(click) events depending on target content or value of ngClick attribute.
I don't think to sync analytics with callbacks of actual clicks is good idea, due to possible side effects on any step.

Categories