I am using custom HTML on Google Tag Manager to set up event tracking for an e-commerce website. However, I also want it to pull in product details, so I know I need to add to this code to capture the variable information. I am seeing the information in the DataLayer in the form of an array. Can I get guidance on how to pull that in?screenshot of data in GTM 1screenshot of data in GTM 2
<script type = "text/javascript">
var vendor = window.vendor || [];
vendor.track("Added To Cart", {{Add to Cart}});
</script>
If your datalayer looks like this
Then yes. You can retrieve this data from DataLayer Variable
Just create like this setting.
Then you can see it from the preview.
Just be careful for what your vendor's tracking code might not use the same format or structure as the Google's ecommerce datalayer.
Related
I am trying to add a small 'lockup' / promo to a page that loads information dynamically based on page.metafield information. Replacing images, video ID's etc. Which all works just fine.
My client is asking for a small area to display a product that relates to this dynamically changing content and I am struggling to come up with a good way to do this.
The current setup is that we have 30 pages with a set of 8 metafields each page. Each one of these pages must show a different , single product with an image, title, price, buy button and another button that links out to a partner site.
I can create snippet and load almost all of this info through metafields manually (price, title etc the client could just add to another metafield) but I would prefer to load a product to pull this info so it can be added to cart. Although I can add product data manually, I still don't actually know which product will get added to the cart, because I'm on a 'page' not a 'product'.
The products themselves are using a custom template that is different to the rest of the site so that seems like its not an option. The template for this content page is just 'page' but surely I can call the product object someway? If the client entered a product ID in the metafields, is there a way of pulling that IDs data easily?
Whatever you mean by pulling ID's, but there are a couple of ways of dealing with this. One, you have a Storefront API token, allowing you to freely and securely call Shopify with JS and get back all the data about the ID you're interested in. Or, you have an App installed in the store, in which case you can setup and callback an App Proxy, providing that ID, and getting back all the info you need. Lots of options!
Which ways are possible to edit the live preview of the product page in Shopify with Inputboxes next to it?
Let's say the product is a poster, and i want to add a custom text on it.
When typing into the inputbox the text changes in real time on the product.
Can this be implemented in the shopify code with the basic version of shopify?
Or does this necessarily needs an app?
ADDITIONALLY:
Let me go a bit deeper. I have a code that can generate a QR code.
Now i want that the QR code to be previewed in the product. Now position and color of the QR code is different from any product. Would that need an app?
Yes you can to an extent.
First the ground rules:
You can't modify the product from the front-end and update the content or media in the back-end - this would be a huge security hole
The changes applied to the product will be visible only to the user who changed them
The solution is to use Javascript and update the content of the front-end. If you like to store the changes for that specific user you can save them as cookie or localstorage.
If you like to share this change to other people you will need to add a custom parameter in the URL of the page and generate the content from it and share that url.
Each one of these steps will require some custom Javascript that will affect only the user in question, if you like to modify the product in the back-end directly you will need some kind of an app for this.
On my mind it can be done if the dynamic text is applied over product image.
Detailed code would be too long to write here but here are the steps:
Add an input to your product form to add a custom property (https://community.shopify.com/c/Shopify-Design/Product-pages-Get-customization-information-for-products/td-p/616503)
Write a Javascript function to get input value in real time
Use this value to display it in a div in product image container
Position this div in CSS as absolute and style it as you wish
While image container position should be set as relative in CSS
HTH
I am looking for custom product filter using my custom Shopify App. I have created an app like structure and which is append to the product collection template.
How can I pass custom parameters like price, category or product attributes via URL or how it will render the product on the collection page.
Thanks,
Navas
If you created an App, you can add a Proxy to it. The Proxy allows Shopify to send secure data to your App via a Javascript call. You get the data from the shop about the product, you filter it, and you return JSON data if you want, to help the front end. Works great. Try it.
I need to generate a URL link on each product page. Each URL needs to contain custom variables specific to that product.
Like so : www.example.com/{{keywords}}/{{productID}}
My understanding is that any custom variables must be saved as metaTags.
My logic to generate the URL is as follows
Create an Embedded App.
Display a dropdown list containing all products.
Display input fields for the user to populate with the text for "keywords" and "productID"
Save this information as Meta Tags so it can be accessible within the Liquid templeting.
Example Mockup of Embedded App : https://imgur.com/D9Grv4m
Example Mockup of Generated URL: https://imgur.com/yjUb9JU
How do I solve the following issues?
How do i save "keywords" and "productID" variables for each individual product.
How do I generate a URL with these variables and populate them on each product page?(I can do it manually through editing the theme but there has to be a way to do this programmatically)
You cannot generate an URL like:
www.example.com/{{keywords}}/{{productID}}
With Shopify you instead use
www.example.com/products/product-handle
And on that product page, you can do as you please with the product ID, and any metafields you choose to maintain and create.
I am tracking PDF download using custom metric. I have written following code
<script>
dataLayer.push({'DLPdfdownload': 1});
</script>
DLPdfdownload is datalayer variable name that I have created in GTM V2.
Script is executing but the problem is that value for PDF download doesn't increment even if I download particular PDF many time. Value in the custom metric remains 1 only it doesn't increment with the download.
What changes do i need to make in script so that value get increment every time I download a PDF
Your question is somewhat incomplete. I'm going to assume from context that you are using Google Analytics with GTM and that you have already created a custom metric in your property settings.
The custom metric will only be incremented if you send it along with a Google Analytics hit. So you need to look up the numeric index for your metric in the property settings. Then you need to set up an Analytics tag that is triggeres when the pdf is downloaded, e.g. by a link click trigger. In that tag you expand the "custom metrics" section, enter the numeric index of your dimension in the index field and your dataLayer variable in the value field.
If that is what you are already doing, or if I have misunderstood your problem, you need to amend your question with more information.
Try to push some 'event' key's value in dataLayer with custom metric data and use custom event with this value as a trigger. Might be that you send data to GA before your custom metric value is pushed to dataLayer.