I would like to know how to use google analytics event code in lit-element,
When try to debug, getting the error as Command ignored. Unknown target: undefined and Referance Error: ga not defined.
I have implemented event tracking in the component, but its not working getting the following error,
//index.ejs
<!doctype html>
<html>
<head>
<script src="/node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="/node_modules/#webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<title>LitElement Example</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXX-X"></script>
</head>
<body>
<service></service>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', "UA-XXXX-X");
</script>
</body>
</html>
//lit-component.js
import { LitElement, html, css } from 'https://cdn.pika.dev/lit-element';
export class Services extends LitElement {
constructor() {
super();
}
handleGA(e){
ga('click', 'event', {
eventCategory: 'site',
eventAction: 'click',
eventLabel: e.target.id
});
}
render(){
<p>Welcome To My Site</p>
<button class="btn btn-primary" id="service" #click=${(e)=>this.hanldeGA(e)}>Click Here</button>
}
}
customElements.define('service', Services);
Related
I would like to render several div containers depending on a returned API call from axios/vue. The axios call and callback work just fine, but vue won't render any divs.
Since I am using Django, I already changed the delimiters from curly brackets (which is Django default as well).
Error message in console:
Property or method "data" is not defined on the instance but referenced during render.
Make sure that this property is reactive, either in the data option,
or for class-based components, by initializing the property.
Please find a minimal code snippet as follows (if you remove the JS part the html will show up):
Thank you in advance for your help!
var app = new Vue({
delimiters: ['[[', ']]'],
el: '.EUR_Quotes',
data: {
info: []
},
created() {
axios
.get("http://data.fixer.io/api/latest?access_key=XXXd&base=EUR")
.then(response => {
this.info = response.data.rates;
console.log(response);
});
}
});
.EUR_Quotes {
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<html>
<head>
</head>
<body>
<div v-for="rates in info">
<div class="EUR_Quotes">[[ data ]]
</div>
</div>
</body>
<script src="https://unpkg.com/vue#2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</html>
You are confusing your data variable name, it should be info in your template, (not data) the actual data object is the container for all your vuejs app's data.
Check the snippet, it works fine.
var app = new Vue({
delimiters: ['[[', ']]'],
el: '.EUR_Quotes',
data: {
info: []
},
created() {
axios
.get("http://data.fixer.io/api/latest?access_key=d&base=EUR")
.then(response => {
this.info = response.data.rates;
console.log(response);
});
}
});
.EUR_Quotes {
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<html>
<head>
</head>
<body>
<div v-for="rates in info">
<div class="EUR_Quotes">[[ info ]]
</div>
</div>
</body>
<script src="https://unpkg.com/vue#2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</html>
I am trying to implement login with linked in my web app. Here is my code..
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: 'key here'
</script>
</head>
<body>
<script>
IN.User.authorize(function (e) {
console.log(e);
}, function (e) {
console.log(e);
});
</script>
</body>
But its giving me error 'Cannot read property 'then' of undefined at Object.authorize (in.js:18)'
i have also tried this way..
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: 'key here'
onLoad: 'onLinkedInLoad'
authorize: true
</script>
</head>
<body>
<!-- LinkedIn signin button -->
<script type="in/Login"></script>
<script type="text/javascript">
// Setup an event listener to make an API call once auth is complete
function onLinkedInLoad() {
IN.Event.on(IN, "auth", getProfileData);
}
</script>
</body>
but its giving me errror
'in.js:7 Uncaught (in promise) TypeError: Could not instantiate tag for 'login': Cannot read property 'on' of null
at new (Login.js?version=0.1.149:7)
at in.js:18'
The documentation and examples for linkedIn show api_key and onLoad function not being set as a string delimeter.
api_key: 0192afsdj10
onLoad: onLinkedInLoad
Secondly, you have not added in a function for the getProfileData function.
Here is an example of the should look like.
function getProfileData() {
IN.API.Profile("me").fields("id", "first-name", "last-name", "headline", "location", "picture-url", "public-profile-url", "email-address").result(displayProfileData);
}
function displayProfileData(profiles){
var member = profiles.values[0];
console.log(member);
}
See code referenced here
I am using Vue js in my javascript code. I downloaded the vue-star-rating npm package to have a rating system for one of my elements. I believe I have followed the instructions here correctly, but I am getting the error
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link type="text/css" rel="../css/ProductEvaluation.css" />
</head>
<body>
<button class="btn btn-sm" id="btnRun">Run</button>
<div id="product-eval-areas">
<ul>
<li v-for="area in areas">
{{area.EvaluationArea}}
// Error is occurring on this custom element
<star-rating v-model="area.ProductEvaluationScore"></star-rating>
</li>
</ul>
</div>
<script src="https://url.com/WebResources/ccseq_/Scripts/jquery3.1.1.js"></script>
<script src="../../Scripts/papaparse.js"></script>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script src="../../Scripts/require.js" data-main="../js/main/ProductEvaluation.js"></script>
</body>
</html>
.js
"use strict";
requirejs.config({
bundles: {
'https://url.com/WebResources/ccseq_/WebResources/js/lib/CCSEQ.WebAPI.js': ['Model/ProductEvaluation', 'Model/ProductEvaluationArea', 'API/ProductEvaluation', 'API/ProductEvaluationArea']
//'../lib/CCSEQ.WebAPI.js': ['Model/ProductEvaluation', 'Model/ProductEvaluationArea', 'API/ProductEvaluation', 'API/ProductEvaluationArea']
}
});
require(["Model/ProductEvaluation", "Model/ProductEvaluationArea", "API/ProductEvaluation", "API/ProductEvaluationArea", "../../../node_modules/vue-star-rating/dist/star-rating.min"], function (ProductEvaluationModel, ProductEvaluationAreaModel, ProductEvaluationAPI, ProductEvaluationAreaAPI, StarRating) {
var currentProductEvaluation = new ProductEvaluationModel.ProductEvaluation();
Vue.component('star-rating', StarRating);
var areas = new Vue({
el: '#product-eval-areas',
data: { areas: currentProductEvaluation.ProductEvaluationAreas }
})
$(document).ready(function () {
PopulatePage();
});
function PopulatePage() {
$("#btnRun").click(function () {
var productEvaluationAPI = new ProductEvaluationAPI.ProductEvaluation();
productEvaluationAPI.Get(window.parent.Xrm.Page.data.entity.getId().replace(/({|})/g, "")).
then(
function (results) {
LoadProductEvaluation(results);
console.log("success");
}).catch(function (results) {
console.log("Fail");
});
});
}
function LoadProductEvaluation(productEvaluation) {
productEvaluation.ccseq_ccseq_productevaluation_ccseq_producteval.forEach(function (pe) {
var newProductEvaluationArea = new ProductEvaluationAreaModel.ProductEvaluationArea();
newProductEvaluationArea.EvaluationArea = pe.ccseq_evaluationarea;
newProductEvaluationArea.ProductEvaluationScore = pe.ccseq_productevaluationscore;
newProductEvaluationArea.SelfEvaluation = pe.ccseq_selfevaluation;
newProductEvaluationArea.ProductEvaluationID = pe.ccseq_productevaluationid;
currentProductEvaluation.ProductEvaluationAreas.push(newProductEvaluationArea);
});
}
});
This is my package, but I didn't document how to use it with requireJS as I haven't used it in quite a few years. It is however bundled as a named UMD module which is defined as "VueStarRating" so you need to add the following to your requirejs config:
paths: {
'VueStarRating': '../../../node_modules/vue-star-rating/dist/star-rating.min'
}
Then you can do:
require(['VueStarRating'], function(StarRating) {
Vue.component('star-rating', StarRating.default);
new Vue({
el: '#app'
})
});
You can check it out on this JSFiddle: https://jsfiddle.net/2Lgz9vs4/
If you run into further trouble then it might be worth tagging your questions with requirejs aswell. Most Vue developers use CommonJS (including myself) so you should get better responses there.
I am trying to load a simple alert in mounted event but its not fired
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.13/vue-resource.min.js"></script>
</head>
<body>
<div id="app-7">
</div>
</body>
</html>
script
new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: 'Vegetables' },
{ text: 'Cheese' },
{ text: 'Whatever else humans are supposed to eat' }
],
origin:'http://s3.myimage.com/avatar.jpg'
},
mounted:function () {
console.log('ready');
alert('ok');
}
})
Also i want to set origin into an img after the page load.
Is it possible with vue??
Have you rendered it to your #app-7?
For your 2nd question, yes it's possible, you can set it up like
<img :src="origin" />
Then your img will take its source from your 'origin' string.-7
When a subclass viewmodel is bound to a View, that overrides a method in a base class in inherits from, "knockout.command" seems to be calling the base method instead of the child overridden method.
Here is a jsfiddle in javascript, although I'm using typescript.
Note a plain old click binding alerts "child action" while the knockout.command alerts "base action". How can I make this correctly call the overridden child method?
Typescript:
class BaseVm {
public commandAction: any;
constructor() {
this.commandAction = ko.asyncCommand({ execute: this.action, canExecute: (isExecuting) => true });
}
public clickAction = () => {
this.action(null, null, null);
}
public action = (val, event, complete) => {
alert("base action");
}
}
class ChildVm extends BaseVm {
constructor() {
super();
}
public action = (loc, event, complete) => {
alert("child action");
}
}
ko.applyBindings(new ChildVm());
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TEST</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/CodeSeven/KoLite/master/knockout.command.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<button data-bind="command: { click: $root.commandAction }">COMMAND</button>
<button data-bind="click: $root.clickAction">CLICK</button>
<script>
ko.applyBindings(new ChildVm());
</script>
</body>
</html>
The problem isn't context, it's that base class constructors run before derived class constructors, and it's the derived class constructor where action gets overwritten by the derived class implementation.
When this line of code runs, this.action still refers to the base class implementation, and the value is captured at that moment.
constructor() {
this.commandAction = ko.asyncCommand({ execute: this.action, canExecute: (isExecuting) => true });
}
You can instead write this to dynamically get the value of this.action:
constructor() {
this.commandAction = ko.asyncCommand({ execute: (a, b, c) => this.action(a, b, c), canExecute: (isExecuting) => true });
}