I have a vuejs project with various pages:
study.vue
result.vue
My client want me to add in the Google Tag Manager code so that they can use google analytic to track. Where should I add the code in my .vue file? Or should I just add it in the index.html?
Update01
This is what I do so far:
I add the Google Tag Manager code to the index.html.
I installed vue-gtm.
I have app.js and bootstrap.js. basically, bootstrap.js will have all my other js frameworks added. Like lodash.js or 'jquery.js'. I add the sample code from vue-gtm into bootstrap.js:
window._ = require('lodash');
window.moment = require('moment');
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter)
import VueGtm from 'vue-gtm';
Vue.use(VueGtm, {
debug: true
})
In all the vue file, I add this code:
this.$ua.trackView('Sample', 'samplepath');
However I got error:
TypeError: Cannot read property 'trackView' of undefined
What seems to be the error?
I assume you are talking about the script that you get when you create an account?
There should be two scripts to include in your HTML, one that has comments around it that include (noscript) and one that doesn't. Both should probably go in your index.html file (whichever file has the <head> and <body> tags). The one that has the noscript should go immediately after the <body> tag, the one that doesn't have the noscript should go near the top of the <head> section.
If you are asking how to fire an event, such as when the user interacts with one of those Vue elements, then yes the code for firing the event should go in the Vue component.
UPDATE 1: I looked into it and setup my own Laravel installation to test (since that seems to be what you're using) and tested it. The problem is that $ua is part of the Vue Analytics, so if you want to use $ua you need to install the vue-ua module as well and add that to Vue. I don't know why the documentation for the Tag Manager module shows how to use the Analytics module without making reference to it, maybe you should file an issue on the Tag Manager GitHub to make the documentation more clear!
So in summary, you should replace $ua with $gtm instead. I tested it and $gtm has a trackView function so it will probably achieve what you want, but I don't know how to use Google Tag Manager so you'll have to test it out yourself.
Related
I've got a (small) React app (vanilla create-react-app), that I would like to appear in a modal (bootstrap or similar) on another site. Is there a library that will simplify this process?
Specifically, the entire use case is that if my Javascript file is loaded (and just one javascript file), it will insert a "Click Me" type call to action, and when clicked my App component will be loaded into a new modal. It will need the CSS (for the app) to be included in some form as well.
I think all of this (excluding the call-to-action which is fairly simple) could be done during Babel/Webpack transpilation but I can't find anything off-the-shelf that seems to do this.
This functionality is built into ReactDOM.render. Simply add an id to your element.
For example:
<!-- index.html -->
<script src="url/to/react/build/asset" as="script" />
<div id="button-and-modal"></div>
Then to render your react app inside the div:
// index.js
import { render } from 'react-dom';
import App from './App'
function renderReact() {
const element = document.getElementById('button-and-modal');
render(<App/>, element)
}
document.addEventListener('DOMContentLoaded', renderReact);
Then your react app would look something like this:
const App = () => (
<div>
<Button/>
<Modal/>
</div>
)
You can also code the button and modal outside of the react app and only have the modal content rendered by react. If you want to do that, then follow the same directions but add the javascript for the button+modal inside the renderReact function.
You can use for example https://direflow.io/ to build your react app as a web component that you can render anywhere on any site.
Using your current project you can do
direflow create
cd <project-name>
npm install
and then
copy your whole app in folder into direflow-components so your project tree would look like:
/public
/src
/direflow-components
/<project-name>
// leave here only index.ts from example and copy all your project files here
index.ts
component-exports.ts
index.ts
react-app-env.d.ts
.eslintrc
...
If needed you can change
...
component: App,
configuration: {
tagname: 'example-component',
},
...
to your component that you want to render and tagname by which app will be accessible.
After all that you just do
npm run build
copy direflowBundle.js from build folder to your website
and render your app on some website like so:
<body>
<script src="./direflowBundle.js"></script>
<awesome-component></awesome-component>
</body>
I feel like I deal with this issue at every Front End job. It's definitely not easy, but I've found a number of ways to do it. I've tried the bundling idea you suggested but that one gave me the hardest time. The easiest way imo without a lot of hassle is to host your react app on a blank web page, then load it into an iframe where you need it.
At my last job, we wanted to migrate our shopify website to react, but with the way the shopify architecture was set up at the time, it made it difficult to us host a server-side rendered react app. So we built the web pages using Next.js and then deployed it to Vercel. We then inserted this as an iframe into the shopify website. It worked beautifully.
It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.
For the CDN builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):
https://www.gstatic.com/firebasejs/5.0.0/firebase-<PACKAGE>.js
It takes half of my already limited console space :(
Note: I use firebase inside html .. with script tags. I don't use import syntax as explained here : similar question
How to stop this warning?
To answer this question a little more clearly,
What you most likely have is
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase.js"></script>
Because this is what Firebase gives you from the "Add Firebase to your web app" screen.
However, what this is doing is importing all of the Firebase modules. I don't know why Firebase has this as the generated script, but all you need to do is add -app to the source so it is now.
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>
Then with every subsequent feature of Firebase you would like to use, you would will need to add another script line. For example, if you would like to add cloud messaging to your web app it would only need.
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-messaging.js"></script>
You can find more information including a complete list of imports here from Firebase.
Your error message tells you how to fix it... this part right here:
For the CDN builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):
https://www.gstatic.com/firebasejs/5.0.0/firebase-<PACKAGE>.js
So if you're using Firebase authentication you'd have a script tag requesting https://www.gstatic.com/firebasejs/5.0.0/firebase-auth.js ... and for the Firebase database you would also have another script tag with https://www.gstatic.com/firebasejs/5.0.0/firebase-database.js .... just following that pattern for any other portions of Firebase you need.
The details given here are not super easy to understand:
step 1: Remove below line, because it's development build:
<script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>
step 2: Add below line, (required), production build:
<script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-app.js"></script>
step 3: Add any more packages/sevices you need, like database, (optional), production build:
<script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-database.js"></script>
This solved the issue.
I am trying to use the following library https://github.com/davidjbradshaw/iframe-resizer/ to resize an iFrame which is positioned inside an other iFrame.
What I tried is to:
copy the minified files of the library in a /assets/lib folder of my app.
add a link to the minified files of the library in the header of the first iFrame:
<script src="/assets/lib/iframeResizer.min.js"></script>
<script src="/assets/lib/iframeResizer.content.min.js"></script>
<script src="/assets/lib/index.js">
This last index.js file only exports the 2 previous files (using export and require). -> This creates an error export is not defined, and require is not defined.
Then, when I add an iFrame that needs to be resized, I use jQuery to insert the script that uses the library:
var script = '<script class="iframe-resizer">iFrameResize({checkOrigin: false}, ".content-card")</script>';
$('.fr-iframe').contents().find("body").append(script);
If I don't add the index.js file, I get the following message "iFrameResize is not defined"
Does anyone have an idea how I could find a workaround?
In fact, the library supports nested iframes.
Requesting the iFrameResizer using jQuery was the best solution I found.
Thanks to this I don't have to install the library manually in the header of the iframe, which simplifies the solution.
I want to use shopify js buy sdk with wordpress. I've downloaded the sdk files and follow the steps as described in the documentation
import Client from 'shopify-buy';
const client = Client.buildClient({
domain: 'your-shop-name.myshopify.com',
storefrontAccessToken: 'your-storefront-access-token'
});
But It always give an error, which says import declarations may only appear at top level of a module.
So I've keep it at the top and add type="module" at the script tag. then the error is solved, but javascript code within this script is not working...
So, can anyone tell me what can I deo to solve this problem?
If you aren't using any of the Node or JS package managers then try using the UMD package available on their documentation page:
<script src="http://sdks.shopifycdn.com/js-buy-sdk/v1/latest/index.umd.min.js"></script>
You can use it like any other js script, it exposes a global window.ShopifyBuy factory.
Then use it like this:
const client = window.ShopifyBuy.buildClient({
domain: 'your-shop-name.myshopify.com',
storefrontAccessToken: 'your-storefront-access-token'
});
I've spent a few days trying to figure this out and it's driving me up the wall. I'm limited on what I can copy and paste, so forgive the 'code brevity'. I also have a working version I developed and have uploaded it to GitHub.
I'm developing a Django website that also uses AngularJS, so I'm using the djangular package, specifically the bit that lets me import Django variables into Angular. This is the section from GitHub:
To use the AngularJS module that Djangular provides you, you'll need to add the djangular app to your projects URLs.
urlpatterns = patterns('',
...
url(r'^djangular/', include('djangular.urls')),
...
)
And I've placed this in my project/urls.py file. I've done the same with my GitHub repository.
When I reference that URL in my appName/app/index.html, I do so like this:
<script src="{% static 'djangular/app.js' %}"></script>
But that leads to a 500 response from the server as Angular produces the Module 'djangular' is not available! error. What should be happening is that the URL djangular/app.js in the script tag above, should redirect to urls.py inside the Djangular folder in the Python site-packages, which then points to DjangularModuleTemplateView.as_view(). This seems to work in my GitHub version, but not in the local version I have for some reason.
If I have my script tag without the "{%static '...'%}" part I still get a 500, with the same error:
<script src="/djangular/app.js"></script>
What config could I possibly have overlooked that's causing the app not to find the right Djangular config? I've stared at both configurations so long my eyes are glazing over, and I'm struggling to find any differences. What else could it be?
I'm more than happy to provide more details if needed to answer this question.
I managed to solve this myself by running ./manage syncdb
This creates various tables (the user table, and the session table at least) which are required for Djangular to run.
Then I double checked all my <script> imports/includes.